Tooltip

import { Tooltip } from "@/components/ui";

1<div className="flex gap-4">
2  <Tooltip content="Top tooltip" side="top">
3    <Button variant="outline">Top</Button>
4  </Tooltip>
5  <Tooltip content="Right tooltip" side="right">
6    <Button variant="outline">Right</Button>
7  </Tooltip>
8  <Tooltip content="Bottom tooltip" side="bottom">
9    <Button variant="outline">Bottom</Button>
10  </Tooltip>
11  <Tooltip content="Left tooltip" side="left">
12    <Button variant="outline">Left</Button>
13  </Tooltip>
14</div>

1<Tooltip
2  content={
3    <div className="space-y-1">
4      <p className="font-semibold">Delete Item</p>
5      <p className="text-xs text-muted-foreground">
6        This action cannot be undone.
7      </p>
8    </div>
9  }
10>
11  <Button variant="destructive">Delete</Button>
12</Tooltip>

1<Tooltip content="No arrow" arrow={false}>
2  <Button variant="outline">Hover me</Button>
3</Tooltip>

1<Tooltip content="Delayed tooltip" delay={500}>
2  <Button variant="outline">Wait for it...</Button>
3</Tooltip>