Tooltip

Glassmorphic tooltips for hover states, cursor labels, and chart data points

Tooltip

Versatile tooltip components with glassmorphic styling. Includes interactive Radix UI tooltips, cursor labels, and chart data tooltips with backdrop blur and gradient-masked borders.

Usage

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from "@/components/ui/tooltip";

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipContent>
          <p>Tooltip content</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Components

Tooltip

The root component from Radix UI that manages tooltip state.

TooltipTrigger

The element that triggers the tooltip on hover/focus.

TooltipContent

The tooltip content with glassmorphic styling and animations.

TooltipProvider

Required provider component that wraps your application or component tree.

CursorTooltip

Standalone tooltip for cursor labels (Bento10 pattern).

ChartTooltip

Specialized tooltip for chart data points (Bento2 pattern) with pill shape and icon support.

Props

TooltipContent Props

Prop	Type	Default	Description
variant	"default" | "solid" | "outline"	"default"	Visual style variant
size	"sm" | "default" | "lg"	"default"	Tooltip size
sideOffset	number	4	Distance from trigger

CursorTooltip Props

Prop	Type	Default	Description
size	"sm" | "default"	"default"	Tooltip size

ChartTooltip Props

Prop	Type	Default	Description
size	"sm" | "default" | "lg"	"default"	Tooltip size

Variants

Style Variants

// Default - glassmorphic with blur
<TooltipContent variant="default">
  Glassmorphic tooltip
</TooltipContent>

// Solid - 10% opacity background
<TooltipContent variant="solid">
  Solid tooltip
</TooltipContent>

// Outline - transparent with border
<TooltipContent variant="outline">
  Outline tooltip
</TooltipContent>

Size Variants

// Small
<TooltipContent size="sm">Small</TooltipContent>

// Default
<TooltipContent size="default">Default</TooltipContent>

// Large
<TooltipContent size="lg">Large</TooltipContent>

Examples

Interactive Tooltip

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <button>Hover for info</button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Additional information</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Cursor Label (Bento10 Pattern)

<div className="relative">
  <CursorIcon />
  <CursorTooltip className="absolute top-4 left-4">
    Artur
  </CursorTooltip>
</div>

Chart Data Point (Bento2 Pattern)

<ChartTooltip>
  <span>Chrome</span>
  <PlusButton size="sm" />
</ChartTooltip>

With Custom Positioning

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent side="right" sideOffset={8}>
      Positioned to the right
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Multiple Tooltips

<TooltipProvider>
  <div className="flex gap-4">
    <Tooltip>
      <TooltipTrigger>Item 1</TooltipTrigger>
      <TooltipContent>Info 1</TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger>Item 2</TooltipTrigger>
      <TooltipContent>Info 2</TooltipContent>
    </Tooltip>
  </div>
</TooltipProvider>

Design Tokens

Dimensions

Size	Padding	Border Radius
sm	8px 8px	var(--radius-xs) (8px)
default	6px 12px	var(--radius-xs) (8px)
lg	8px 16px	var(--radius-sm) (12px)

Effects

Token	Value	Description
Background	var(--neutral-2-5)	5% opacity glassmorphic
Blur	var(--blur-xl) (30px)	Backdrop blur
Shadow	var(--shadow-3)	Glassmorphic shadow
Border	var(--ui-stroke-subtle)	Gradient-masked border

Chart Tooltip

Element	Value
Height	40px (default)
Border radius	20px (pill shape)
Border	var(--ui-stroke-selected)
Inner radius	16px

Radix UI Integration

This component uses @radix-ui/react-tooltip for:

• Automatic positioning
• Collision detection
• Keyboard navigation
• Focus management
• Animation states

Provider Setup

Wrap your app or component tree with TooltipProvider:

import { TooltipProvider } from "@/components/ui/tooltip";

export default function App({ children }) {
  return (
    <TooltipProvider delayDuration={200}>
      {children}
    </TooltipProvider>
  );
}

Found In

• Bento2 - Chart data point tooltips
• Bento10 - Cursor name labels
• Bento18 - File name tooltips
• Bento22 - Info tooltips
• Bento26 - Metric tooltips

Accessibility

• Full keyboard navigation (Radix UI)
• role="tooltip" automatically applied
• aria-describedby relationship managed
• Focus trap when open
• ESC key to close
• Proper z-index layering

Best Practices

// Always provide meaningful content
<Tooltip>
  <TooltipTrigger aria-label="Settings">
    <SettingsIcon />
  </TooltipTrigger>
  <TooltipContent>
    Open settings panel
  </TooltipContent>
</Tooltip>

// Use TooltipProvider at app level
<TooltipProvider delayDuration={200}>
  <App />
</TooltipProvider>

Performance

• Lazy rendering (only when triggered)
• Portal-based rendering (outside DOM hierarchy)
• Hardware-accelerated animations
• Minimal re-renders with Radix UI state management