Tooltips
Examples and documentation for the tooltips component
🎮 Interactive Tooltip Demo
Live Preview
0ms
0ms
1000ms
Placement
top
Theme
Default
Delay
0ms
Animation
Shift Toward
Arrow
Yes
Interactive
No
🔧 Basic Examples
🎯 Trigger Types
Hover to show
Click to show
Tab to focus
🚀 Advanced Examples
📝 Form Examples
🎯 Icon Tooltips
🏠
⚙️
👤
❓
🔔
🔍
Color Variants
|
Color
|
Description
|
Tooltip
|
|---|---|---|
|
|
Primary brand color for main actions | |
|
|
Accent color for secondary actions and highlights | |
|
|
Success color for positive actions and confirmations | |
|
|
Warning color for cautionary messages and actions | |
|
|
Danger color for destructive actions and errors | |
|
|
Info color for informational messages and actions | |
|
|
Secondary color for less prominent elements | |
|
|
Light color for subtle backgrounds and borders | |
|
|
Dark color for strong contrast and emphasis |