Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. Built on top of Radix UI Tooltip primitive.

Installation

npm install @darksnow-ui/tooltip

Peer Dependencies

npm install react react-dom

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@darksnow-ui/tooltip"
import { Button } from "@darksnow-ui/button"

export function TooltipExample() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Components

TooltipProvider

Wraps your app to provide tooltip functionality.

| Prop | Type | Default | Description | |-----------------|---------|---------|--------------------------------------| | delayDuration | number | 700 | Duration before tooltip appears | | skipDelayDuration| number | 300 | Duration to skip delay | | disableHoverableContent| boolean | false | Disables hoverable content |

Tooltip

The root container for tooltip components.

TooltipTrigger

The button that triggers the tooltip.

| Prop | Type | Default | Description | |---------|---------|---------|-------------------------| | asChild | boolean | false | Render as child element |

TooltipContent

The content that appears in the tooltip.

| Prop | Type | Default | Description | |-------------|-----------------------------------------|---------|---------------------------------| | className | string | - | Additional CSS classes | | sideOffset | number | 4 | Distance from trigger | | side | "top" | "right" | "bottom" | "left" | "top" | Preferred side |

Examples

Basic Tooltip

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button>Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>This is a tooltip</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Icon with Tooltip

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline" size="icon">
        <PlusIcon className="h-4 w-4" />
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add item</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Multiple Tooltips

<TooltipProvider>
  <div className="flex space-x-2">
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline" size="icon">
          <EditIcon className="h-4 w-4" />
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Edit</p>
      </TooltipContent>
    </Tooltip>
    
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline" size="icon">
          <TrashIcon className="h-4 w-4" />
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Delete</p>
      </TooltipContent>
    </Tooltip>
  </div>
</TooltipProvider>

Custom Positioning

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button>Bottom tooltip</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom" sideOffset={10}>
      <p>This tooltip appears at the bottom</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Rich Content Tooltip

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Profile</Button>
    </TooltipTrigger>
    <TooltipContent className="max-w-xs">
      <div className="space-y-2">
        <p className="font-semibold">John Doe</p>
        <p className="text-xs text-theme-content-muted">
          Software Developer at Acme Corp
        </p>
      </div>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Accessibility

• Full keyboard support
• Screen reader accessible with proper ARIA attributes
• Focus management
• Supports ESC key to close
• Automatic positioning to stay in viewport

Styling

The Tooltip components use DarkSnow UI design tokens:

• Background: bg-theme-bg-dark
• Text: text-theme-content
• Border radius: rounded-md
• Animations: Smooth fade and zoom transitions
• Z-index: z-50 for proper layering

Best Practices

1. Concise content: Keep tooltip text short and informative
2. Essential information: Only include essential information
3. Consistent timing: Use consistent delay durations
4. Keyboard accessible: Ensure tooltips work with keyboard navigation
5. Mobile considerations: Consider touch interactions on mobile devices

Related Components

• Popover - More complex interactive content
• Dialog - Modal dialogs
• Button - Interactive buttons