Tooltip

A popup that displays contextual information associated with an element when it receives keyboard focus or when the user hovers over it with the mouse.

tooltip-demo.tsx

1import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
2import { Button } from './button/button-source';
3
4export function TooltipDemo() {
5  return (
6    <div className="flex items-center justify-center gap-4 p-10">
7      <Tooltip delayDuration={0}>
8        <TooltipTrigger asChild>
9          <Button variant="outline">Hover me</Button>
10        </TooltipTrigger>
11        <TooltipContent side="top">
12          <p>Add to library</p>
13        </TooltipContent>
14      </Tooltip>
15    </div>
16  );
17}

PreviousTabs