Clidey UXDocs

Tooltip

Tooltip shows a small label when hovering over an element. Built on Radix UI's tooltip primitive with configurable delay and positioning.

Interactive example#

Tooltip · Live example

Project not bookmarked

Hover the control or focus it with Tab. Its tooltip follows the action state.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Import#

TSX

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@clidey/ux';

Setup#

Wrap your app (or a section of it) with TooltipProvider. It configures a shared delay for all tooltips in its subtree:

TSX

import { TooltipProvider } from '@clidey/ux';

<TooltipProvider>
  <App />
</TooltipProvider>

Basic tooltip#

TSX

<Tooltip>
  <TooltipTrigger>
    <Button variant="ghost" size="icon">
      <Settings className="size-4" />
    </Button>
  </TooltipTrigger>
  <TooltipContent>Settings</TooltipContent>
</Tooltip>

Custom delay#

TSX

<TooltipProvider delayDuration={0}>
  {/* tooltips show instantly */}
</TooltipProvider>

Positioned tooltip#

TSX

<Tooltip>
  <TooltipTrigger>
    <Button size="sm">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent side="right" sideOffset={8}>
    This tooltip appears to the right
  </TooltipContent>
</Tooltip>

Toolbar with tooltips#

TSX

<div className="flex gap-1">
  {[
    { icon: <Bold />, label: 'Bold', shortcut: '⌘B' },
    { icon: <Italic />, label: 'Italic', shortcut: '⌘I' },
    { icon: <Underline />, label: 'Underline', shortcut: '⌘U' },
  ].map((item) => (
    <Tooltip key={item.label}>
      <TooltipTrigger>
        <Button variant="ghost" size="icon">
          {item.icon}
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <span>{item.label}</span>
        <span className="ml-2 text-muted-foreground">{item.shortcut}</span>
      </TooltipContent>
    </Tooltip>
  ))}
</div>

Disabled element tooltip#

Radix UI requires the trigger to forward events. Wrap disabled elements in a <span>:

TSX

<Tooltip>
  <TooltipTrigger>
    <span>
      <Button disabled>Submit</Button>
    </span>
  </TooltipTrigger>
  <TooltipContent>Complete all required fields first</TooltipContent>
</Tooltip>

Props#

TooltipProvider

PropTypeDefaultDescription
delayDurationnumber700Milliseconds before the tooltip shows on hover.
skipDelayDurationnumber300Delay before a tooltip shows when moving between multiple triggers quickly.

Tooltip

PropTypeDefaultDescription
openboolean—Controlled open state.
defaultOpenbooleanfalseUncontrolled default open state.
onOpenChange(open: boolean) => void—Called when open state changes.

TooltipContent

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""top"Preferred side to display the tooltip.
sideOffsetnumber0Distance in pixels between trigger and tooltip.
align"start" | "center" | "end""center"Alignment relative to the trigger.
classNamestring—Additional CSS classes.

Was this page helpful?

← OverlaysSheetOverlays →Popover