FEEDBACK

Tooltip

Small floating label revealed on hover or focus. Built on Radix Tooltip — full keyboard support, smart edge flipping, and ARIA wiring come from the primitive. Wrap your app once in TooltipProvider to share a single delay timer across all tooltips.

Import

1import {
2  TooltipProvider,
3  Tooltip,
4  TooltipTrigger,
5  TooltipContent,
6} from 'damo-ui'

Provider — once per app

Wrap your root layout in a single TooltipProvider. All nested tooltips share its delay. Without the provider, individual tooltips still work but don't coordinate timing.

1// In your root layout:
2<TooltipProvider delayDuration={150}>
3  {children}
4</TooltipProvider>

Basic usage

1<Tooltip>
2  <TooltipTrigger asChild>
3    <Button variant="ghost">Hover me</Button>
4  </TooltipTrigger>
5  <TooltipContent>Helpful hint</TooltipContent>
6</Tooltip>

On an icon button

Pair Tooltip with IconButton to surface the action's name on hover. aria-label on the IconButton stays the canonical accessible name; the tooltip is supplementary.

1<Tooltip>
2  <TooltipTrigger asChild>
3    <IconButton aria-label="Settings" variant="ghost">
4      <CogIcon size={18} />
5    </IconButton>
6  </TooltipTrigger>
7  <TooltipContent>Open settings</TooltipContent>
8</Tooltip>

Props

Tooltip props
PropTypeDefaultDescription
delayDurationnumber700Prop on TooltipProvider (and per-Tooltip). Milliseconds before the tooltip opens on hover.
side'top' | 'right' | 'bottom' | 'left''top'Prop on TooltipContent. Preferred edge to anchor against; flips automatically.
sideOffsetnumber4Gap between trigger and tooltip.
align'start' | 'center' | 'end''center'Inline alignment relative to the trigger.

Accessibility

  • The trigger receives Radix focus management; pressing Tab opens the tooltip, Esc closes it.
  • Tooltips don't replace labels. For icon-only triggers, always set aria-label on the trigger — the tooltip text alone is not announced as the accessible name.
  • Tooltip content is not focusable. Use Popover when the user must interact with the floating panel.
← PopoverToast →