Tooltips are used primarily to display additional information regarding a UI element when it’s hovered or focused. Tooltips can be used on every UI. element.
A tooltip appears only when the user hovers over its corresponding element or if that element has focus.
Normally, when you use a tooltip, you have to give an ID to the tooltip element and mention that ID within the aria-describedby attribute of its corresponding element.
If you don’t want to set the ID manually, you can place the tooltip element as the next sibling element of its associated element. The id and aria-describedby attributes will automatically be generated once the component is initialized.
<div class="flex-row">
<button
class="flexy-button flexy-button--tonal-primary"
aria-describedby="my-tooltip"
>
<span>First</span>
</button>
<span class="flexy-tooltip" id="my-tooltip">
<span class="flexy-tooltip__content">This is a tooltip</span>
</span>
<button class="flexy-button flexy-button--tonal-primary">
<span>Second</span>
</button>
<span class="flexy-tooltip">
<span class="flexy-tooltip__content"
>ID of this tooltip is dynamically generated</span
>
</span>
</div>
Tooltips support four placements: above, right, below (default), and left. In some cases, the placement may be flipped (e.g., a left tooltip appearing on the right) if there is not enough space to render the tooltip within the viewport.
To preview this behavior, try resizing your window to a very small width.
<div class="flex-row">
<button class="flexy-button flexy-button--tonal-primary">
<span>Left</span>
</button>
<span class="flexy-tooltip" data-flexy-tooltip-placement="left">
<span class="flexy-tooltip__content">Tooltip appears left</span>
</span>
<button class="flexy-button flexy-button--tonal-primary">
<span>Below</span>
</button>
<span class="flexy-tooltip" data-flexy-tooltip-placement="below">
<span class="flexy-tooltip__content">Tooltip appears below</span>
</span>
<button class="flexy-button flexy-button--tonal-primary">
<span>Above</span>
</button>
<span class="flexy-tooltip" data-flexy-tooltip-placement="above">
<span class="flexy-tooltip__content">Tooltip appears above</span>
</span>
<button class="flexy-button flexy-button--tonal-primary">
<span>Right</span>
</button>
<span class="flexy-tooltip" data-flexy-tooltip-placement="right">
<span class="flexy-tooltip__content">Tooltip appears right</span>
</span>
</div>
Tooltips support configurable show and hide delays via the
data-flexy-tooltip-showdelay and data-flexy-tooltip-hidedelay attributes,
specified in milliseconds. These delays apply only to hover interactions; focus
and keyboard Events will ignore them.
Following example set 0.5s for show delay and 1s for hide delay.
<div class="flex-row">
<button class="flexy-button flexy-button--tonal-primary">
<span>Delayed Tooltip</span>
</button>
<span
class="flexy-tooltip"
data-flexy-tooltip-showdelay="500"
data-flexy-tooltip-hidedelay="1000"
>
<span class="flexy-tooltip__content">Tooltip with show and hide delays</span>
</span>
</div>
Normally, you can interact with rendered tooltips (e.g., you can hover over
them or select their text). If you want, you can disable this behavior with
flexy-tooltip--nointeractive CSS class.
<div class="flex-row">
<button class="flexy-button flexy-button--tonal-primary">
<span>Uninteractive tooltip</span>
</button>
<span class="flexy-tooltip flexy-tooltip--nointeractive">
<span class="flexy-tooltip__content"
>You cannot not hover or interact with this tooltip</span
>
</span>
</div>
flexy-tooltipflexy-tooltip--nointeractivedata-flexy-tooltip-placementdata-flexy-tooltip-showdelaydata-flexy-tooltip-hidedelayanimation-durationanimation-easingfill-colormax-widthpaddingshadowshapespacingtext-colortext-heighttext-sizeLast modified: Oct 19, 2025: refactor(docs): Reorganize the folder structure of component examples (8271c2e)