Browse components
Tooltip
Hover and focus tooltip in the native top layer: open delay with instant hand-off between neighbors, auto-flip placement, a tracking arrow and a springy fade-scale.
Installation
npx shadcn@latest add @glint-ui/tooltipFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/tooltip.json
Usage
import { Tooltip } from "@/components/ui/tooltip";
<Tooltip content="Copy link" side="top">
<button aria-label="Copy link"><Link2 /></button>
</Tooltip>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "top" | Preferred side; flips when there is no room. |
| delay | number | 500 | Hover delay before opening (ms). |
| sideOffset | number | 8 | Gap between trigger and bubble (px). |
| arrow | boolean | true | Show the arrow. |
| content | ReactNode | — | Tooltip text or node. |
| children | ReactNode | — | A single focusable trigger element. |
| open | ReactNode | — | Controlled open state (with onOpenChange). |
| className | string | — | Extra classes for the root element. |