On this page
Overview
Show code, IconActions.tsx
Variants
Sides
Where the window has no room, a tooltip flips to the other side.
- Top
Most controls. The default.
- Bottom
Controls at the top of a window or a pane, such as a toolbar.
- Beside
A vertical rail, toward the content, in either direction.
Still picture, not live
Beside a rail of icons, toward the content.
Show code, RailOfIcons.tsx
Anatomy
Tooltip
Control
Show code, TooltipAnatomy.tsx
Behaviour
Menu trigger
A tooltip can name the button that opens a menu, a popover, a dialog or a sheet.
- It stays closed while what it opens is open.
Show code, MenuTrigger.tsx
Keyboard shortcuts
Write the shortcut after the control's name, such as Bold (Ctrl+B).
Still picture, not live
Show code, ShortcutHints.tsx
Text
Text that isn't a control, such as an abbreviation, takes a quiet underline of round, well-spaced dots that says it shows more on hover or focus. It takes keyboard focus, so the keyboard opens the tooltip too.
Show code, TextAbbreviation.tsx
Rules
A tooltip adds a name or a hint to something people can focus, and never holds the only account of anything.
Use it when
- An icon-only control's name, such as Refresh
- Why a control is disabled, beside the page's own account of it
- A control's keyboard shortcut, such as Bold (Ctrl+B)
Show code, IconOnlyNamed.tsx
Show code, RepeatsLabel.tsx
Trigger
A tooltip belongs to something people can focus, such as a button, never to an icon alone.
Disabled controls
Say why a control is disabled in the page, not only in its tooltip: touch screens never show one.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to the control, which opens its tooltip at once. |
| Esc | Closes the tooltip; focus and an enclosing dialog stay. |