Tooltip component

[saeedalipoor]

I think This would be how the tooltip component can be used:

<Tooltip delay={1000} position="bottom" anchor={anchorRef}>
  Line height
</Tooltop>

or

<Tooltip delay={1000} position="bottom" content="Line height">
  /* tooltip trigger */
  <Button />
</Tooltip>

Also, Textbox components would be much more usable if tooltip properties could be passed to them.

<TextboxNumeric tooltipProps={{content: 'Line height', position: 'bottom'}} icon={<Icon />} />

---

Little detail about the delay:
While Figma's tooltips are active, other tooltips will appear immediately if you move the cursor over the anchors

---

A feature that keeps tooltips in the viewport while the anchor is visible would also be great.

[yuanqing]

@saeedalipoor I think this would be quite useful for some plugins, and it would bring the UI library even closer to Figma’s native UI.

However, the desired UX seems decidedly non-trivial to implement. A big challenge I see is how to not bloat the bundle when the component consumer chooses to not use the tooltip feature 🤔

[saeedalipoor]

We can ignore the idea of tooltip properties to keep the bundle lighter and just have the tooltip component that can wrap any node as an anchor point.

[hikariNTU]

There are some existing library handle the Tooltip part, namely the popper.js and it's relative project. Tippy.js, Floating UI best suite the Figma behavior.

But as @yuanqing said, these feature include extraneous dependencies, around 5~10KB gzip size.

As a developer I might want to handle tooltip by myself.

And if the overflow issue is not a concern, css-tooltip on data attribute might be enough for simple tooltip title.

Should this library bundle an existing solution or providing some hand-made Component?

[ben-katz]

Do we know how native Figma tooltips are coded? From some googling it seems like creating custom tooltips with React Portals is pretty straightforward and wouldn't require any external libs.

[jcusick93]

Any updates on this? I'd love to use a tooltip

[yuanqing]

An interim workaround is to just add a title attribute

how to not bloat the bundle when the component consumer chooses to not use the tooltip feature

One solution to not bloat the bundle is to require the use of a Provider component at the root