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
tabindex
to 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
tabindex
to 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
tabindex
to 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 |
|