Tooltip (components/ui/tooltip.tsx)

Overview

A versatile tooltip component for displaying additional information on hover with customizable positioning and animations.

Features

• Multiple positions (top, right, bottom, left)
• Custom content support
• Configurable delays
• Arrow pointer
• Animation effects
• Portal rendering
• Touch device support

Dependencies

import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
import { cn } from '@/lib/utils'

Props

interface TooltipProps {
  content: string | ReactNode;
  position?: 'top' | 'right' | 'bottom' | 'left';
  delay?: number;
  hideDelay?: number;
  arrow?: boolean;
  disabled?: boolean;
  className?: string;
}

Implementation

State Management

const [isVisible, setIsVisible] = useState(false)
const [position, setPosition] = useState<Position>('top')

Methods

const handleMouseEnter = () => {
  if (!disabled) {
    showTimeout.current = window.setTimeout(() => {
      setIsVisible(true)
    }, delay)
  }
}

const handleMouseLeave = () => {
  if (showTimeout.current) {
    clearTimeout(showTimeout.current)
  }
  setIsVisible(false)
}

Unique Functionality

• Position calculation for viewport awareness
• Animation handling with transition states
• Timeout management for delays
• Touch device interaction handling

HTML Structure

<TooltipRoot>
  <TooltipTrigger>
    {children}
  </TooltipTrigger>

  <TooltipPortal>
    <TooltipContent
      side={position}
      className={cn("tooltip-content", className)}
    >
      {content}
      <TooltipArrow />
    </TooltipContent>
  </TooltipPortal>
</TooltipRoot>

API Integration

No direct API integration - functions as a UI primitive component.

Components Used

• Button
• Icon
• SidebarElement
• ThemeCard

Notes

• Use portals for proper stacking context
• Implement delay handling for better UX
• Handle tooltip positioning relative to viewport edges
• Clean up timeouts on component unmount
• Ensure proper touch device support