Tooltip The Tooltip component is a small pop-up that appears when a user hovers over an element. It provides brief, helpful descriptions or context about a specific UI item. You can customize the position (top, bottom, left, right) and the color to match your design system's specific requirements.
Copy Code
<div class="tooltip" data-tip="Tooltip">
<button class="btn">Hover me</button>
</div>Custom Tooltip Content
Copy Code
<div class="tooltip tooltip-end">
<div class="tooltip-body">
<div class="text-xl">❤️</div>
<div>Like</div>
</div>
<button class="btn">Hover me</button>
</div>
Copy Code
<div class="tooltip" data-tip="Menu">
<button class="btn btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>
<span class="sr-only">Menu</span>
</button>
</div>
Copy Code
<div class="tooltip tooltip-open" data-tip="hello">
<button class="btn">Force open</button>
</div>Top Placement
Copy Code
<div class="tooltip tooltip-top tooltip-open" data-tip="Tooltip top">
<button class="btn">Top position</button>
</div>Right Placement
Copy Code
<div class="tooltip tooltip-right tooltip-open" data-tip="Tooltip right">
<button class="btn">Right position</button>
</div>End Placement
Copy Code
<div class="tooltip tooltip-end tooltip-open" data-tip="Tooltip end">
<button class="btn">End position</button>
</div>Bottom Placement
Copy Code
<div class="tooltip tooltip-bottom tooltip-open" data-tip="Tooltip bottom">
<button class="btn">Bottom position</button>
</div>Left Placement
Copy Code
<div class="tooltip tooltip-left tooltip-open" data-tip="Tooltip left">
<button class="btn">Left position</button>
</div>Start Placement
Copy Code
<div class="tooltip tooltip-start tooltip-open" data-tip="Tooltip start">
<button class="btn">Start position</button>
</div>Primary Color
Copy Code
<div class="tooltip tooltip-primary tooltip-open" data-tip="Primary">
<button class="btn btn-xs">Primary color</button>
</div>Secondary Color
Copy Code
<div class="tooltip tooltip-secondary tooltip-open" data-tip="Secondary">
<button class="btn btn-xs">Secondary color</button>
</div>Accent Color
Copy Code
<div class="tooltip tooltip-accent tooltip-open" data-tip="Accent">
<button class="btn btn-xs">Accent color</button>
</div>Info Color
Copy Code
<div class="tooltip tooltip-info tooltip-open" data-tip="Info">
<button class="btn btn-xs">Info color</button>
</div>Success Color
Copy Code
<div class="tooltip tooltip-success tooltip-open" data-tip="Success">
<button class="btn btn-xs">Success color</button>
</div>Warning Color
Copy Code
<div class="tooltip tooltip-warning tooltip-open" data-tip="Warning">
<button class="btn btn-xs">Warning color</button>
</div>Error Color
Copy Code
<div class="tooltip tooltip-error tooltip-open" data-tip="Error">
<button class="btn btn-xs">Error color</button>
</div>Neutral Color
Copy Code
<div class="tooltip tooltip-neutral tooltip-open" data-tip="Neutral">
<button class="btn btn-xs">Neutral color</button>
</div>Show only on large screens with lg:tooltip
Copy Code
<div class="lg:tooltip" data-tip="Hey there!">
<button class="btn">Hover me</button>
</div>