Components
Tooltip
Tooltip displays brief information when the user hovers over or focuses on an element. It is used for secondary information, such as explaining the meaning of an icon.
We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on Github or Slack.
Mouse interaction
The Tooltip appears when you hover the mouse pointer over an element, and disappears when the pointer moves away.
Keyboard interaction
The Tooltip appears when an element receives keyboard focus, and disappears when the focus is removed.
Touch interaction
On touch devices, Tooltip is less suitable because it is normally triggered by hover or focus, which are not supported on these devices. Instead, the Tooltip appears only when the user taps the element, and disappears again when the user taps outside the element.
Known limitations
In Safari, the fade-in animation does not work.
Edit this page on github.com (opens in a new tab)