Tooltip
Tooltip is a non-modal overlay, initially hidden, that appears on hover or focus. It provides concise, text-only content related to the associated interactive element, typically offering supplementary (non-essential) information without disturbing the users workflow.
- Keep the use of tooltips to a minimum and use only when providing extra (non-essential) information for the user.
- Focus does not move to the tooltip. Since a tooltip does not receive focus, do not include interactive elements in the tooltip as the user cannot access them.
- Only one tooltip should be displayed at a time.
- Keep the text for a tooltip short and concise.
- Avoid rich content such as bold text, italics, headings, icons, etc. as these will not be conveyed through
aria-describedby. - Do not use a timeout to hide the tooltip.
Avoid applying a tooltip to non-interactive elements. As a rule, non-operable elements should not receive keyboard focus to avoid confusion and unnecessary navigation steps. A common anti-pattern is to use an (i) icon (or another non-interative element) as the tooltip anchor however this is not recommended for the following reasons:
- Icons (and other non-interative elements) do not receive focus by default.
- Adding
tabindexto make the icon focusable introduces an additional tab stop. - An (i) icon or non-interative element will not provide an appropriate programmatic association to what the tooltip is visually associated with. These tooltips become an orphaned note that screen readers announce out of context.
- Screen readers are designed to announce tooltips when a user focuses on an interactive element. When a tooltip is attached to a static element (even using
tabindex) Screen readers may not reliably announce its content as it is not part of the expected interaction model.
Note: When the content of a tooltip is not about an interactive UI element, consider adding the message directly on the page or use an Overlay, Dialog, or Banner instead.
Standard tooltips do not display on touch-only devices when attached to Links, Buttons or non-interative elements and there is currently no workaround. That said, tooltips should display when attached to a Form Field.
| Key | Function |
|---|---|
| Tab |
|
| Escape |
|
- Keep the use of tooltips to a minimum and use only when providing extra (non-essential) information for the user.
- Focus does not move to the tooltip. Since a tooltip does not receive focus, do not include interactive elements in the tooltip as the user cannot access them.
- Only one tooltip should be displayed at a time.
- Keep the text for a tooltip short and concise.
- Avoid rich content such as bold text, italics, headings, icons, etc. as these will not be conveyed through
aria-describedby. - Do not use a timeout to hide the tooltip.
Avoid applying a tooltip to non-interactive elements. As a rule, non-operable elements should not receive keyboard focus to avoid confusion and unnecessary navigation steps. A common anti-pattern is to use an (i) icon (or another non-interative element) as the tooltip anchor however this is not recommended for the following reasons:
- Icons (and other non-interative elements) do not receive focus by default.
- Adding
tabindexto make the icon focusable introduces an additional tab stop. - An (i) icon or non-interative element will not provide an appropriate programmatic association to what the tooltip is visually associated with. These tooltips become an orphaned note that screen readers announce out of context.
- Screen readers are designed to announce tooltips when a user focuses on an interactive element. When a tooltip is attached to a static element (even using
tabindex) Screen readers may not reliably announce its content as it is not part of the expected interaction model.
Note: When the content of a tooltip is not about an interactive UI element, consider adding the message directly on the page or use an Overlay, Dialog, or Banner instead.
Standard tooltips do not display on touch-only devices when attached to Links, Buttons or non-interative elements and there is currently no workaround. That said, tooltips should display when attached to a Form Field.
| Key | Function |
|---|---|
| Tab |
|
| Escape |
|
- Keep the use of tooltips to a minimum and use only when providing extra (non-essential) information for the user.
- Focus does not move to the tooltip. Since a tooltip does not receive focus, do not include interactive elements in the tooltip as the user cannot access them.
- Only one tooltip should be displayed at a time.
- Keep the text for a tooltip short and concise.
- Avoid rich content such as bold text, italics, headings, icons, etc. as these will not be conveyed through
aria-describedby. - Do not use a timeout to hide the tooltip.
Avoid applying a tooltip to non-interactive elements. As a rule, non-operable elements should not receive keyboard focus to avoid confusion and unnecessary navigation steps. A common anti-pattern is to use an (i) icon (or another non-interative element) as the tooltip anchor however this is not recommended for the following reasons:
- Icons (and other non-interative elements) do not receive focus by default.
- Adding
tabindexto make the icon focusable introduces an additional tab stop. - An (i) icon or non-interative element will not provide an appropriate programmatic association to what the tooltip is visually associated with. These tooltips become an orphaned note that screen readers announce out of context.
- Screen readers are designed to announce tooltips when a user focuses on an interactive element. When a tooltip is attached to a static element (even using
tabindex) Screen readers may not reliably announce its content as it is not part of the expected interaction model.
Note: When the content of a tooltip is not about an interactive UI element, consider adding the message directly on the page or use an Overlay, Dialog, or Banner instead.
Standard tooltips do not display on touch-only devices when attached to Links, Buttons or non-interative elements and there is currently no workaround. That said, tooltips should display when attached to a Form Field.
| Key | Function |
|---|---|
| Tab |
|
| Escape |
|