Tooltip

Installation

npx @yolkui/cli add tooltip

Placement

side sets where it opens: top (the default), bottom, inline-start or inline-end. It flips when there is no room. inline-start and inline-end follow Base UI's DirectionProvider, so a right-to-left app wraps its root in <DirectionProvider direction="rtl"> beside dir="rtl".

On a disabled button

A disabled button stays focusable and keeps pointer events, so a tooltip can say why it is disabled, on hover and on focus.

Accessibility

Screen readers hear the tooltip when the trigger takes focus, before it shows. Escape closes it, and the pointer can move onto it without closing it.

• By default it describes a control and the control keeps its own name. On an icon-only button, type="label" makes the tooltip its name instead, so it needs no aria-label and a reader hears it once.
• A shortcut goes in shortcut ("⌘B"): it is shown but kept out of the name. Give it to screen readers as aria-keyshortcuts on the trigger ("Meta+B").
• Wrap a toolbar or the app in TooltipProvider: one tooltip shows at a time, and moving along the row switches at once.
• Keep it short and plain. No links, buttons or other controls inside; use a popover for those.
• It opens on hover and focus, not on a tap, so never put the only copy of something important in it. On touch screens nobody sees it.
• Put it on something focusable, such as a button or a link, so keyboard users reach it.