Tooltip
Tooltips add additional context to interactive UI elements and appear on mouse hover or keyboard focus.
On this page
Description
Tooltip
only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.
Use tooltips as a last resort. Please consider Tooltips alternatives.
When using a tooltip, follow the provided guidelines to avoid accessibility issues:
- Tooltips should contain only non-essential text. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.
Tooltip
should be rendered through the API of Button, Link, or IconButton. Avoid usingTooltip
a standalone component unless absolutely necessary (and only on interactive elements).- Tooltip text must be brief and concise even when used to display a description.
- Tooltips can only hold string content.
- Tooltips are not allowed on
disabled
elements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, usearia-disabled="true"
instead and programmatically disable the element. - Never set tooltips on static, non-interactive elements like
span
ordiv
. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only and screen reader users. Use of tooltips through Button, Link, or IconButton will guarantee this. - If you must use
Tooltip
as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired. content.
Semantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a
aria-labelledby
or an aria-describedby
association. The type
drastically changes semantics and screen reader behavior so follow these guidelines carefully:
- When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set
type: :description
. The majority of tooltips will fall under this category. - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set
type: :label
.label
type is usually only appropriate for an icon-only control.
Arguments
Name | Type | Default | Description |
---|---|---|---|
for_id | String | N/A | The ID of the element that the tooltip should be attached to. |
type | Symbol | N/A | One of |
direction | Symbol |
| One of |
text | String | N/A | The text content of the tooltip. This should be brief and no longer than a sentence. |
system_arguments | Hash | N/A |
Examples
Methods
id
Returns the value of attribute id.