Primitive / Atomstable

Tooltip

Context hint on hover/focus using Radix tooltip primitive.

@glinui/uiComponent: tooltip

Installation$

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add tooltip

Usage$

Tooltip requires a TooltipProvider wrapping its usage context. Place it at the app root or around the component tree where tooltips appear to share the delay configuration.

Basic$

TSX

1import { Button } from "@glinui/ui"
2import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@glinui/ui"
3
4export function TooltipBasicDemo() {
5return (
6  <TooltipProvider>
7    <Tooltip>
8      <TooltipTrigger asChild>
9        <Button variant="outline">Hover me</Button>
10      </TooltipTrigger>
11      <TooltipContent>
12        <p>Tooltip content here</p>
13      </TooltipContent>
14    </Tooltip>
15  </TooltipProvider>
16)
17}

Examples$

Custom Delay$

Override the open delay per-tooltip by passing delayDuration to the Tooltip root. A delay of 0 opens instantly.

TSX

1import { Button } from "@glinui/ui"
2import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@glinui/ui"
3
4export function TooltipDelayDemo() {
5return (
6  <TooltipProvider>
7    <div className="flex items-center gap-4">
8      <Tooltip delayDuration={0}>
9        <TooltipTrigger asChild>
10          <Button variant="outline" size="sm">Instant</Button>
11        </TooltipTrigger>
12        <TooltipContent>
13          <p>Opens immediately (0 ms)</p>
14        </TooltipContent>
15      </Tooltip>
16      <Tooltip delayDuration={700}>
17        <TooltipTrigger asChild>
18          <Button variant="outline" size="sm">Delayed</Button>
19        </TooltipTrigger>
20        <TooltipContent>
21          <p>Opens after 700 ms</p>
22        </TooltipContent>
23      </Tooltip>
24    </div>
25  </TooltipProvider>
26)
27}

Side Positioning$

Use side on TooltipContent to anchor the hint above, below, left, or right of the trigger. The tooltip auto-adjusts to avoid viewport clipping.

TSX

1import { Button } from "@glinui/ui"
2import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@glinui/ui"
3
4export function TooltipSideDemo() {
5return (
6  <TooltipProvider>
7    <div className="flex items-center justify-center gap-4">
8      <Tooltip>
9        <TooltipTrigger asChild>
10          <Button variant="outline" size="sm">Top</Button>
11        </TooltipTrigger>
12        <TooltipContent side="top">
13          <p>Top tooltip</p>
14        </TooltipContent>
15      </Tooltip>
16      <Tooltip>
17        <TooltipTrigger asChild>
18          <Button variant="outline" size="sm">Right</Button>
19        </TooltipTrigger>
20        <TooltipContent side="right">
21          <p>Right tooltip</p>
22        </TooltipContent>
23      </Tooltip>
24      <Tooltip>
25        <TooltipTrigger asChild>
26          <Button variant="outline" size="sm">Bottom</Button>
27        </TooltipTrigger>
28        <TooltipContent side="bottom">
29          <p>Bottom tooltip</p>
30        </TooltipContent>
31      </Tooltip>
32      <Tooltip>
33        <TooltipTrigger asChild>
34          <Button variant="outline" size="sm">Left</Button>
35        </TooltipTrigger>
36        <TooltipContent side="left">
37          <p>Left tooltip</p>
38        </TooltipContent>
39      </Tooltip>
40    </div>
41  </TooltipProvider>
42)
43}

Accessibility$

Built on Radix Tooltip; the content is linked via aria-describedby on the trigger automatically.
Tooltip opens on focus as well as hover, ensuring keyboard users receive the same context hints.
Do not place interactive elements (buttons, links) inside TooltipContent — use a Popover for that pattern.
Keep tooltip text to a single short phrase. For longer explanations, prefer an inline description.

Reduced Motion$

Tooltip fade and scale transitions respect prefers-reduced-motion. When enabled, the content appears instantly without animation.

API Reference$

Prop	Type	Required	Default	Description
`defaultOpen`	`boolean`	No	`-`	Initial open state for uncontrolled usage.
`delayDuration`	`number`	No	`-`	Delay in ms before showing tooltip content.
`onOpenChange`	`(open: boolean) => void`	No	`-`	Callback when open state changes.
`open`	`boolean`	No	`-`	Controlled open state.

TooltipContent$

Prop	Type	Required	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	No	`-`	Preferred side for tooltip content.
`sideOffset`	`number`	No	`6`	Gap in px between trigger and content.
`variant`	`"default" \| "glass" \| "frosted"`	No	`"default"`	Variant option from tooltipContentVariants.

Source$

TSX

1import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@glinui/ui"

packages/ui/src/components/tooltip.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/tooltip.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

TooltipProps

`TooltipContentProps`

Prop	Type	Required	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	No	`-`	Preferred side for tooltip content.
`sideOffset`	`number`	No	`6`	Gap in px between trigger and content.
`variant`	`"default" \| "glass" \| "frosted"`	No	`"default"`	Variant option from tooltipContentVariants.

`TooltipProps`

Prop	Type	Required	Default	Description
`defaultOpen`	`boolean`	No	`-`	Initial open state for uncontrolled usage.
`delayDuration`	`number`	No	`-`	Delay in ms before showing tooltip content.
`onOpenChange`	`(open: boolean) => void`	No	`-`	Callback when open state changes.
`open`	`boolean`	No	`-`	Controlled open state.