Search
Copy Code
Previous: Hover Card
Next: Dropdown Menu
Close Terminal
Light Mode
tooltip-demo.tsx
tooltip.tsx
Collapse
Reset
Copy Code
Download
Run
1
"use client"
2
3
import { Search, Mail, Bell, Bookmark, Star, Settings } from "lucide-react"
4
import {
5
Tooltip,
6
TooltipContent,
7
TooltipProvider,
8
TooltipTrigger,
9
} from "@/components/ui/tooltip"
10
11
export default function TooltipDemo() {
12
return (
13
<div className="w-full min-h-[400px] flex flex-col items-center justify-center gap-8 p-8">
14
<div className="flex items-center gap-4">
15
<TooltipProvider delayDuration={200}>
16
<Tooltip>
17
<TooltipTrigger asChild>
18
<button className="inline-flex h-8 items-center justify-center rounded-full border border-black/10 bg-transparent px-4 text-[13px] font-medium text-zinc-950 transition-colors hover:bg-black/5 dark:border-white/10 dark:text-zinc-50 dark:hover:bg-white/5">
19
Click me
20
</button>
21
</TooltipTrigger>
22
<TooltipContent>
23
<p>Simple tooltip</p>
24
</TooltipContent>
25
</Tooltip>
26
27
<Tooltip>
28
<TooltipTrigger asChild>
29
<button className="inline-flex h-8 items-center justify-center rounded-full border border-black/10 bg-transparent px-4 text-[13px] font-medium text-zinc-950 transition-colors hover:bg-black/5 dark:border-white/10 dark:text-zinc-50 dark:hover:bg-white/5">
30
Save
31
</button>
32
</TooltipTrigger>
33
<TooltipContent>
34
<p className="flex items-center">
35
Save
36
<span className="ml-3 opacity-60">ā S</span>
37
</p>
38
</TooltipContent>
39
</Tooltip>
40
</TooltipProvider>
41
</div>
42
43
<div className="flex items-center gap-1 rounded-full border border-black/10 p-1 dark:border-white/10 shadow-sm">
44
<TooltipProvider delayDuration={200}>
45
<Tooltip>
46
<TooltipTrigger asChild>
47
<button className="inline-flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 transition-colors hover:bg-black/5 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-zinc-50">
48
<Search className="h-4 w-4" />
49
</button>
50
</TooltipTrigger>
51
<TooltipContent>
52
<p>Search</p>
53
</TooltipContent>
54
</Tooltip>
55
56
<Tooltip>
57
<TooltipTrigger asChild>
58
<button className="inline-flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 transition-colors hover:bg-black/5 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-zinc-50">
59
<Mail className="h-4 w-4" />
60
</button>
61
</TooltipTrigger>
62
<TooltipContent>
63
<p>Inbox alerts</p>
64
</TooltipContent>
65
</Tooltip>
66
67
<Tooltip>
68
<TooltipTrigger asChild>
69
<button className="inline-flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 transition-colors hover:bg-black/5 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-zinc-50">
70
<Bell className="h-4 w-4" />
71
</button>
72
</TooltipTrigger>
73
<TooltipContent>
74
<p>Notifications</p>
75
</TooltipContent>
76
</Tooltip>
77
78
<Tooltip>
79
<TooltipTrigger asChild>
80
<button className="inline-flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 transition-colors hover:bg-black/5 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-zinc-50">
81
<Bookmark className="h-4 w-4" />
82
</button>
83
</TooltipTrigger>
84
<TooltipContent>
85
<p>Add to library</p>
86
</TooltipContent>
87
</Tooltip>
88
89
<Tooltip>
90
<TooltipTrigger asChild>
91
<button className="inline-flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 transition-colors hover:bg-black/5 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-zinc-50">
92
<Star className="h-4 w-4" />
93
</button>
94
</TooltipTrigger>
95
<TooltipContent>
96
<p>Favorites</p>
97
</TooltipContent>
98
</Tooltip>
99
100
<Tooltip>
101
<TooltipTrigger asChild>
102
<button className="inline-flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 transition-colors hover:bg-black/5 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-zinc-50">
103
<Settings className="h-4 w-4" />
104
</button>
105
</TooltipTrigger>
106
<TooltipContent>
107
<p>Settings</p>
108
</TooltipContent>
109
</Tooltip>
110
</TooltipProvider>
111
</div>
112
</div>
113
)
114
}