Tooltip
A tooltip is a small, contextual overlay that provides additional information when users interact with an element in a user interface.
<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
| Item | Name | Description | Optional |
|---|---|---|---|
| 1 | Panel | Contains the panel content | no |
| 2 | Content | An area to display any text content | no |
| 3 | Pointer | Indicates the direction of context that the tooltip is attributed to | yes |
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.
| Item | Options | Description |
|---|---|---|
| position | 1-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'clock | To indicate the direction of context that the tooltip is attributed to |
| tooltip | value | To insert the text of the tooltip |
<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.
Properties
| Name | Attribute | Type | Default | Description |
|---|---|---|---|---|
arrowPadding | - | number | 16 | The default padding of the arrow. |
maxWidth | max-width | number | undefined | The maximum width of the tooltip. | |
offset | - | number | 12 | The default offset of the tooltip to its anchor. |
position | position | '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 | - | number | 8 | The default margin between the tooltip and the viewport. |
Methods
| Name | Parameters | Return | Description |
|---|---|---|---|
lazy | target: Elementcallback: (target: Tooltip) => voidoptions: TooltipOptions | void | To attach the `sl-tooltip` to the DOM tree and anchor element |
Slots
| Name | Description |
|---|---|
default | The 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:
| Command | Description |
|---|---|
tab | Toggles the tooltip when the element that triggers it is focussed. |
WAI-ARIA
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.
| Attribute | Value | Description | User supplied |
|---|---|---|---|
role | 'tooltip' | Declare our custom component as a tooltip. | no |
aria-describedby | string | Used to link with the anchor element of the tooltip (element that triggers the tooltip). Should contain id of anchor element. | yes |