UI Component LabOverlay
Tooltip
A short note that appears near an element while it is hovered or focused.
Demo
Copies this page’s address to the clipboard
How to recognize it
A small dark label, often with a little arrow, just above or below the element it describes.
Behavior
- Appears after a short delay on hover or keyboard focus, and disappears when the pointer leaves or focus moves away.
- It never receives focus, so it should not contain links or buttons.
- The element points to the tooltip with aria-describedby, so screen readers read it as a description.
- The APG Tooltip pattern is still marked as work in progress.
Keyboard
| Key | Action |
|---|---|
| Tab | Focusing the element shows the tooltip. |
| Esc | Hides the tooltip. |
Similar components
- Popover: A tooltip shows on hover or focus and holds only text; a popover opens on click and can contain buttons and links.
Sources
- WAI-ARIA APG: Tooltip Pattern (Last checked: )