Preview

Import

import { Tooltip, TooltipProvider } from "@sigil-ui/components";

Setup

Wrap your app in <TooltipProvider>:

<TooltipProvider>
  <App />
</TooltipProvider>

Usage

Tooltip is a wrapper component. Pass content for the tooltip text and a single element as children (via asChild):

<Tooltip content="More information">
  <Button variant="ghost" size="sm">
    <InfoIcon className="size-4" />
  </Button>
</Tooltip>

Placement

<Tooltip content="Above" side="top"><Button>Top</Button></Tooltip>
<Tooltip content="Right" side="right"><Button>Right</Button></Tooltip>
<Tooltip content="Below" side="bottom"><Button>Bottom</Button></Tooltip>
<Tooltip content="Left" side="left"><Button>Left</Button></Tooltip>

Custom delay

<TooltipProvider delayDuration={0}>
  <Tooltip content="No delay">
    <Button>Instant tooltip</Button>
  </Tooltip>
</TooltipProvider>

Token integration

CSS Variable	Used for
`--s-surface`	Tooltip background
`--s-text`	Tooltip text color
`--s-radius-sm`	Border radius
`--s-shadow-sm`	Subtle elevation
`--s-duration-fast`	Fade animation
`--s-font-size-sm`	Text size

Props

Prop	Type	Default	Description
`content`	`string`	—	Tooltip text
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Preferred side
`delayDuration`	`number`	`200`	Open delay in ms
`children`	`ReactNode`	—	Single trigger element (via `asChild`)

TooltipProvider

Prop	Type	Default	Description
`delayDuration`	`number`	`400`	Open delay in ms

Accessibility

Tooltip appears on both hover and focus
Content is linked via aria-describedby
Escape closes the tooltip
Children must be a single element (required by asChild)
Follows WAI-ARIA Tooltip pattern

On this page