Tooltip

Displays brief, contextual information when hovering over or focusing on an element, improving clarity without cluttering the interface.

ReUIbySean Hello

import { Button } from '@/components/ui/button-1';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Info } from 'lucide-react';

export default function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">
            <Info className="h-4 w-4" />
            Light tooltip
          </Button>
        </TooltipTrigger>
        <TooltipContent variant="light">
          <p>Get detailed information about this feature.</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}