Tooltip

Ready

Contextual information overlays on hover or focus

Basic Tooltip

Simple tooltip on hover

Icon Tooltips

Tooltips on icon buttons

Position Variants

Tooltip positioning options

Installation

Install the required dependencies

npm install @radix-ui/react-tooltip

Usage

Basic implementation example

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
import { Button } from '@/components/ui/button'

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Tooltip content</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Props

TooltipContent props

PropTypeDefaultDescription
side'top' | 'right' | 'bottom' | 'left''top'Tooltip position
align'start' | 'center' | 'end''center'Alignment relative to trigger
sideOffsetnumber4Distance from trigger in pixels

Features

Built-in functionality

  • Hover & focus - Shows on mouse hover and keyboard focus
  • 4 positions - Top, right, bottom, left
  • Smart positioning - Auto-adjusts to stay in viewport
  • Accessible - ARIA describedby for screen readers
  • Dark mode - Full dark mode support
  • 6px border radius - Consistent with Eidetic design