Glass Tooltip for React

Preview

Demos ready. Update 0.

Installation

For React 19+ apps with Tailwind CSS 4.

npmpnpmyarnbun

$ npx shadcn@4.14.1 add @glassyui/glass-tooltip

Adds 12 files to components/glassyui and installs @radix-ui/react-tooltip and clsx.

Usage

import { GlassTooltip, GlassTooltipContent, GlassTooltipProvider, GlassTooltipTrigger } from "@/components/glassyui/glass-tooltip";

export function TooltipDemo() {
  return (
    <GlassTooltipProvider>
      <GlassTooltip>
        <GlassTooltipTrigger>Hover</GlassTooltipTrigger>
        <GlassTooltipContent>Tooltip content</GlassTooltipContent>
      </GlassTooltip>
    </GlassTooltipProvider>
  );
}

Examples

Short hint

<GlassTooltipContent>Copied</GlassTooltipContent>

API reference

`GlassTooltipProvider`

Shares open delays between tooltips. Wrap your app or a section in one.

Prop	Type	Default	Description
`delayDuration`	`number`	`700`	Milliseconds of hover before a tooltip opens.

Also accepts Radix Tooltip.Provider props.

`GlassTooltip`

Prop	Type	Default	Description
`open / defaultOpen`	`boolean`	`false`	Controlled or uncontrolled open state.
`onOpenChange`	`(open: boolean) => void`	None	Called when the tooltip opens or closes.

Also accepts Radix Tooltip.Root props.

`GlassTooltipTrigger`

The element the tooltip describes.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Renders your own focusable element as the trigger.

Also accepts Radix Tooltip.Trigger props.

`GlassTooltipContent`

The glass label, rendered in a portal.

Prop	Type	Default	Description
`sideOffset`	`number`	`6`	Gap between the trigger and the label, in pixels.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`	Preferred side; it flips to stay on screen.
`className`	`string`	None	Applies to the glass panel.

Also accepts Radix Tooltip.Content props.