Tooltip

A tooltip is a small, contextual overlay that provides additional information when users interact with an element in a user interface.

UsageCodeAccessibility

Button with a tooltipThis is a tooltip with some additional information

<sl-button aria-describedby="tooltip">Button with a tooltip</sl-button>
<sl-tooltip id="tooltip">This is a tooltip with some additional information</sl-tooltip>

When to use

Explanations for unfamiliar terms or jargon

Tooltips can offer brief definitions or explanations for technical terms, acronyms, or industry-specific terminology.

Long titles or descriptions

If you’re displaying a list of articles with truncated titles, a tooltip can reveal the complete title when users hover over the ellipsis.

When not to use

Essential and critical information

Avoid using tooltips for critical instructions or essential information. Users may miss tooltips, especially if they quickly interact with elements.

Mobile devices and touchscreens

Tooltips rely on hover interactions, which do not translate well to touchscreens.

Accessibility concerns

Some users rely on screen readers or have visual impairments. Ensure that tooltips are accessible and provide an alternative method (such as keyboard shortcuts) to access the same information.

Anatomy

ItemNameDescriptionOptional
1PanelContains the panel contentno
2ContentAn area to display any text contentno
3PointerIndicates the direction of context that the tooltip is attributed toyes

Options

With these options you can tweak the appearance of the tooltip in Figma. They are available in the Design Panel so you can compose the tooltip to exactly fit the user experience need for the uses case you are working on.

ItemOptionsDescription
position1-o'clock 2-o'clock 3-o'clock 4-o'clock 5-o'clock 6-o'clock 7-o'clock 8-o'clock 9-o'clock 10-o'clock 11-o'clock 12-o'clockTo indicate the direction of context that the tooltip is attributed to
tooltipvalueTo insert the text of the tooltip
Interactive example