Overlays
Tooltip
A small dark label with an arrow that appears on hover or keyboard focus, on any side of its trigger. Built on Radix Tooltip.
- Source
- src/components/ui/tooltip.tsx
- Figma
- Tooltip · direction (top, bottom, left, right).
Usage
Included in the GliaKit boilerplate. Import it where you need it:
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent,} from "@/components/ui/tooltip";When to use
- Naming icon-only buttons in toolbars and table rows.
- Showing the keyboard shortcut for an action.
- Short clarifications of a label or value that most people do not need.
- For essential information or anything interactive, such as links. Tooltips do not open on touch devices.
- For longer explanations, show helper text or use a Dialog.
Examples
Sides
Set side to top (default), right, bottom or left. It flips automatically when there is no room.
With a keyboard shortcut
A toolbar where each tooltip shows the action and its shortcut. A shorter delayDuration suits dense toolbars.
On a disabled button
Disabled buttons get no pointer or focus events, so put the trigger on a focusable span around the button.
API reference
TooltipProvider
Radix Tooltip.Provider. Required above any Tooltip. Wrap the app once near the root.
| Prop | Type | Default | Description |
|---|---|---|---|
| delayDuration | number | 700 | Milliseconds of hover before a tooltip opens. |
| skipDelayDuration | number | 300 | Window in which moving to another trigger opens its tooltip without the delay. |
Tooltip
Radix Tooltip.Root.
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Controlled open state. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | - | Called when the tooltip opens or closes. |
| delayDuration | number | - | Overrides the provider delay for this tooltip. |
TooltipTrigger
Radix Tooltip.Trigger. Use asChild to wrap your own Button.
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Merge trigger behavior into the child element instead of rendering a <button>. |
TooltipContent
Inverted bubble (foreground on background) with an arrow, in a portal. Extends Radix Tooltip.Content props.
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "top" | Preferred side of the trigger. Flips when there is no room. |
| sideOffset | number | 4 | Distance from the trigger in pixels. |
| align | "start" | "center" | "end" | "center" | Alignment against the trigger. |
Accessibility
- Built on Radix Tooltip: it opens on hover and on keyboard focus, and Escape closes it.
- The content is linked to the trigger with aria-describedby, so screen readers announce it as a description.
- A tooltip describes; it does not name. Icon-only buttons still need their own aria-label.
- Disabled buttons do not receive pointer or focus events. Wrap them in a <span tabIndex={0}> and put the trigger on the span.