Components
Glass Tooltip
Frosted glass tooltip chip that scales in from its anchor with spring easing. Provider-based open delay grouping.
Notifications
Settings
Share
Playground
Edit the props live and copy the config.
Liquid glass tooltip
Side
Tint
0.55
<TooltipProvider>
<Tooltip>
<TooltipTrigger>Trigger</TooltipTrigger>
<TooltipContent side="top" tint={0.55}>
Liquid glass tooltip
</TooltipContent>
</Tooltip>
</TooltipProvider>Install
npx shadcn@latest add https://websiteglass.com/r/glass-tooltip.jsonUsage
import {
TooltipProvider,
Tooltip,
TooltipTrigger,
TooltipContent,
} from '@/components/ui/glass-tooltip';
<TooltipProvider delayMs={400}>
<Tooltip>
<TooltipTrigger>Hover me</TooltipTrigger>
<TooltipContent>Glass tooltip</TooltipContent>
</Tooltip>
</TooltipProvider>Components
TooltipProvider
| Prop | Type | Default | Description |
|---|---|---|---|
delayMs | number | 400 | Hover delay before showing tooltip, shared by all children. |
Tooltip
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Initial open state. |
onOpenChange | (v: boolean) => void | — | Fires on open change. |
TooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
tint | number | 0.55 | Frosted tint of the tooltip panel. |
side | "top" | "bottom" | "left" | "right" | "top" | Which side of the trigger to anchor to. |
sideOffset | number | 8 | Gap in px between trigger and tooltip. |