Overview
A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Esc is pressed or on mouse out.
Usage
Use when
- Providing a short description of a page element or control.
- Describing the action of an icon-only button.
- Revealing the full text of truncated data.
- Revealing the purpose of a menu that has a dynamic title.
Don’t use when
- Providing a description longer than 10 words.
- Your application exists on mobile devices. There is no hover state to activate the tooltip.
What's changed
| Date | Version | Notes | Contributors |
|---|---|---|---|
| 06/04/2023 | 1.2.0 | Relative pointer added to top and bottom variant. | J. de Wit, S. Kaukonen, R. Stillwell |
| 03/15/2023 | 1.1.0 | Background colors changed to be accessible. | E. Gunther, S. Kaukonen |