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


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.


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

Figma 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.

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
WesharethesametooltipI am shared between different elements
<sl-button aria-describedby="tooltip-id" fill="solid" variant="primary">We</sl-button>
<sl-button aria-describedby="tooltip-id" fill="solid" variant="primary">share</sl-button>
<sl-button aria-describedby="tooltip-id" fill="solid" variant="primary">the</sl-button>
<sl-button aria-describedby="tooltip-id" fill="solid" variant="primary">same</sl-button>
<sl-button aria-describedby="tooltip-id" fill="solid" variant="primary">tooltip</sl-button>
<sl-tooltip id="tooltip-id">I am shared between different elements</sl-tooltip>

TooltipDirective API

When working on the application with LitElement, TooltipDirective can be used as an alternative way for adding sl-tooltip component. This is a LitElement specific directive - a custom LitElement directive. More information you can find here.

The TooltipDirective can be added to the anchor element e.g. button by passing a string for the tooltip content:

  ${tooltip('This tooltip is from a directive')}

The complete usage example might appear as follows:

  <sl-button ${tooltip('This tooltip is from a directive')}>I have a tooltip</sl-button>

Tooltip API

Tooltip component has a range of properties to define the experience in different use cases. sl-tooltip component is recommended to use in all non-LitElement applications.


arrowPadding-number16The default padding of the arrow.
maxWidthmax-widthnumber | undefinedThe maximum width of the tooltip.
offset-number12The default offset of the tooltip to its anchor.
positionposition'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end''top'Position of the tooltip relative to its anchor.
viewportMargin-number8The default margin between the tooltip and the viewport.


lazytarget: Elementcallback: (target: Tooltip) => voidoptions: TooltipOptionsvoidTo attach the `sl-tooltip` to the DOM tree and anchor element


defaultThe slot for the tooltip content.

Accessibility considerations

Discoverability and readability

Ensure that tooltips are discoverable and readable using various input methods, including: Mouse or other pointer devices, keyboard navigation, screen readers, zoom software or any other assistive technology. Users with different abilities should be able to access tooltip content seamlessly.

Informative but non-essential content

Tooltips should provide information that enhances the user’s understanding of the UI but is not strictly necessary for operating it. Avoid critical information in tooltips, as users relying solely on assistive technologies may miss it.

Non-blocking behavior

When a tooltip is open, it should not obstruct the user from performing other tasks on the screen. Test this behavior across all responsive breakpoints to ensure consistent behavior regardless of screen size.

Keyboard interactions

Here's an overview of the common keyboard interactions associated with a tooltip:

tabToggles the tooltip when the element that triggers it is focussed.


WAI-ARIA Roles, States, and Properties for a tooltip provide essential information to assistive technologies and screen readers. They convey the tooltip's role, state, and additional properties to ensure accessibility and a better user experience for individuals using assistive technology.

Specifies whether the attribute is always set in the component (no) or it can be provided by the developer (yes)

AttributeValueDescriptionUser supplied
role'tooltip'Declare our custom component as a
aria-describedbystringUsed to link with the anchor element of the tooltip (element that triggers the tooltip). Should contain id of anchor element.yes
Interactive example