Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: tippy.js tooltips & interaction mode toggle #9

Merged
merged 5 commits into from
Jul 12, 2023

Conversation

Dynamic6448
Copy link
Contributor

  • Added a new toggle input to enable/disable interaction mode
  • Add tooltips to instrument buttons (interaction-mode, toggle refresh button, & auto-refresh toggle)

Copy link
Member

@MikeRomaa MikeRomaa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should use tippy.js instead since it has a handy prop called appendTo that lets us portal the tooltip out of the workspace. That way, the tooltip is not affected by the zoom level set by the workspace transform.

It also foregoes the data-tooltip-id props and instead renders based on children. For example:

<Tippy content="Refresh Instrument" appendTo={document.body}>
    <button className="ml-auto" onClick={refresh}>
        <HiRefresh className="cursor-pointer active:text-silver-500" size={22} />
    </button>
</Tippy>

Let me know what you think, always open to discussing alternatives.

src/components/Instrument.tsx Outdated Show resolved Hide resolved
src/components/Instrument.tsx Outdated Show resolved Hide resolved
src/components/Instrument.tsx Outdated Show resolved Hide resolved
src/components/Input.tsx Outdated Show resolved Hide resolved
src/components/Input.tsx Outdated Show resolved Hide resolved
src/components/Input.tsx Outdated Show resolved Hide resolved
@MikeRomaa MikeRomaa mentioned this pull request Jul 10, 2023
5 tasks
@MikeRomaa MikeRomaa added the enhancement New feature or request label Jul 10, 2023
@Dynamic6448 Dynamic6448 changed the title feat: react-tooltip & interaction mode toggle feat: tippy.js tooltips & interaction mode toggle Jul 10, 2023
src/components/Input.tsx Outdated Show resolved Hide resolved
src/components/Input.tsx Outdated Show resolved Hide resolved
src/components/Input.tsx Outdated Show resolved Hide resolved
src/components/Instrument.tsx Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
@Dynamic6448 Dynamic6448 requested a review from MikeRomaa July 11, 2023 22:39
Copy link
Member

@MikeRomaa MikeRomaa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool stuff!

@MikeRomaa MikeRomaa merged commit f721e8f into synapticsim:master Jul 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants