Tooltip

1import { Button } from '@/components/ui/button'
2import {
3    Tooltip,
4    TooltipContent,
5    TooltipTrigger,
6} from '@/components/ui/tooltip'
7
8export function TooltipDemo() {
9    return (
10        <Tooltip defaultOpen>
11            <TooltipTrigger asChild>
12                <Button variant="outline">Hover me</Button>
13            </TooltipTrigger>
14            <TooltipContent>
15                <p>Add tooltip content here.</p>
16            </TooltipContent>
17        </Tooltip>
18    )
19}
20

1import { Button } from '@/components/ui/button'
2import {
3    Tooltip,
4    TooltipContent,
5    TooltipTrigger,
6} from '@/components/ui/tooltip'
7
8export function TooltipPosition() {
9    return (
10        <div className="flex items-center flex-col gap-4">
11            <Tooltip>
12                <TooltipTrigger asChild>
13                    <Button variant="outline">top</Button>
14                </TooltipTrigger>
15                <TooltipContent side='top'>
16                    <p>Add tooltip content here.</p>
17                </TooltipContent>
18            </Tooltip>
19            <Tooltip>
20                <TooltipTrigger asChild>
21                    <Button variant="outline">Right</Button>
22                </TooltipTrigger>
23                <TooltipContent side='right'>
24                    <p>Add tooltip content here.</p>
25                </TooltipContent>
26            </Tooltip>
27            <Tooltip>
28                <TooltipTrigger asChild>
29                    <Button variant="outline">Bottom</Button>
30                </TooltipTrigger>
31                <TooltipContent side='bottom'>
32                    <p>Add tooltip content here.</p>
33                </TooltipContent>
34            </Tooltip>
35            <Tooltip>
36                <TooltipTrigger asChild>
37                    <Button variant="outline">Left</Button>
38                </TooltipTrigger>
39                <TooltipContent side='left'>
40                    <p>Add tooltip content here.</p>
41                </TooltipContent>
42            </Tooltip>
43        </div>
44    )
45}
46

1import { Button } from '@/components/ui/button'
2import {
3    Tooltip,
4    TooltipContent,
5    TooltipTrigger,
6} from '@/components/ui/tooltip'
7
8export function TooltipDelay() {
9    return (
10        <div className="flex items-center gap-4">
11            <Tooltip delayDuration={300}>
12                <TooltipTrigger asChild>
13                    <Button variant="outline">Fast (300ms)</Button>
14                </TooltipTrigger>
15                <TooltipContent>
16                    <p>Add tooltip content here.</p>
17                </TooltipContent>
18            </Tooltip>
19            <Tooltip delayDuration={1000}>
20                <TooltipTrigger asChild>
21                    <Button variant="outline">Slow (1000ms)</Button>
22                </TooltipTrigger>
23                <TooltipContent>
24                    <p>Add tooltip content here.</p>
25                </TooltipContent>
26            </Tooltip>
27        </div>
28    )
29}
30