Tooltip

A tooltip component built on Radix UI primitives for displaying helpful information on hover or focus.

Import

Code
 
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  TooltipArrow,
} from "zudoku/ui/Tooltip";

Components

The Tooltip component consists of several sub-components:

• TooltipProvider - Provides context for tooltip behavior
• Tooltip - The main container (root)
• TooltipTrigger - Element that triggers the tooltip
• TooltipContent - The tooltip content container
• TooltipArrow - Optional arrow pointing to the trigger

Basic Usage

Hover

Code
 
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

With Arrow

Hover for tooltip with arrow

Code
 
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover for tooltip with arrow</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
      <TooltipArrow />
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Different Sides

Code
 
<TooltipProvider>
  <div className="flex gap-2">
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Top</Button>
      </TooltipTrigger>
      <TooltipContent side="top">
        <p>Top tooltip</p>
      </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Right</Button>
      </TooltipTrigger>
      <TooltipContent side="right">
        <p>Right tooltip</p>
      </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Bottom</Button>
      </TooltipTrigger>
      <TooltipContent side="bottom">
        <p>Bottom tooltip</p>
      </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Left</Button>
      </TooltipTrigger>
      <TooltipContent side="left">
        <p>Left tooltip</p>
      </TooltipContent>
    </Tooltip>
  </div>
</TooltipProvider>

Global Provider

For multiple tooltips, wrap your app with TooltipProvider:

Code
 
function App() {
  return <TooltipProvider>{/* Your app content with tooltips */}</TooltipProvider>;
}

Features

• Keyboard Navigation: Accessible via keyboard focus
• Positioning: Smart positioning to stay within viewport
• Delay Control: Configurable show/hide delays
• Animation: Smooth enter/exit animations
• Accessibility: Full screen reader and keyboard support