Tooltip
Pure CSS tooltips that appear on hover/focus. No JavaScript required.
Basic
Hello tooltip!
<div class="tooltip">
<button class="btn">Hover me</button>
<span class="tooltip-content">Hello tooltip!</span>
</div> Requires: ux.min.css
<div class="relative inline-flex group">
<button class="btn">Hover me</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-neutral text-neutral-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Hello tooltip!</span>
</div> Requires: tw.min.css
// No JavaScript required - pure CSS hover/focus Positions
Top tooltip
Bottom tooltip
Left tooltip
Right tooltip
<div class="flex items-center gap-6 flex-wrap justify-center">
<div class="tooltip">
<button class="btn btn-outline">Top</button>
<span class="tooltip-content">Top tooltip</span>
</div>
<div class="tooltip tooltip-bottom">
<button class="btn btn-outline">Bottom</button>
<span class="tooltip-content">Bottom tooltip</span>
</div>
<div class="tooltip tooltip-left">
<button class="btn btn-outline">Left</button>
<span class="tooltip-content">Left tooltip</span>
</div>
<div class="tooltip tooltip-right">
<button class="btn btn-outline">Right</button>
<span class="tooltip-content">Right tooltip</span>
</div>
</div> Requires: ux.min.css
<div class="flex items-center gap-6 flex-wrap justify-center">
<div class="relative inline-flex group">
<button class="btn btn-outline">Top</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-neutral text-neutral-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Top tooltip</span>
</div>
<div class="relative inline-flex group">
<button class="btn btn-outline">Bottom</button>
<span class="absolute top-full left-1/2 -translate-x-1/2 mt-1.5 px-2.5 py-1.5 bg-neutral text-neutral-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Bottom tooltip</span>
</div>
<div class="relative inline-flex group">
<button class="btn btn-outline">Left</button>
<span class="absolute right-full top-1/2 -translate-y-1/2 mr-1.5 px-2.5 py-1.5 bg-neutral text-neutral-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Left tooltip</span>
</div>
<div class="relative inline-flex group">
<button class="btn btn-outline">Right</button>
<span class="absolute left-full top-1/2 -translate-y-1/2 ml-1.5 px-2.5 py-1.5 bg-neutral text-neutral-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Right tooltip</span>
</div>
</div> Requires: tw.min.css
// No JavaScript required - pure CSS positioning Colors
Neutral
Primary
Success
Warning
Error
<div class="flex items-center gap-4 flex-wrap justify-center">
<div class="tooltip">
<button class="btn btn-sm">Default</button>
<span class="tooltip-content">Neutral</span>
</div>
<div class="tooltip tooltip-primary">
<button class="btn btn-sm color-primary">Primary</button>
<span class="tooltip-content">Primary</span>
</div>
<div class="tooltip tooltip-success">
<button class="btn btn-sm color-success">Success</button>
<span class="tooltip-content">Success</span>
</div>
<div class="tooltip tooltip-warning">
<button class="btn btn-sm color-warning">Warning</button>
<span class="tooltip-content">Warning</span>
</div>
<div class="tooltip tooltip-error">
<button class="btn btn-sm color-error">Error</button>
<span class="tooltip-content">Error</span>
</div>
</div> Requires: ux.min.css
<div class="flex items-center gap-4 flex-wrap justify-center">
<div class="relative inline-flex group">
<button class="btn btn-sm">Default</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-neutral text-neutral-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Neutral</span>
</div>
<div class="relative inline-flex group">
<button class="btn btn-sm color-primary">Primary</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-primary text-primary-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Primary</span>
</div>
<div class="relative inline-flex group">
<button class="btn btn-sm color-success">Success</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-success text-success-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Success</span>
</div>
<div class="relative inline-flex group">
<button class="btn btn-sm color-warning">Warning</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-warning text-warning-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Warning</span>
</div>
<div class="relative inline-flex group">
<button class="btn btn-sm color-error">Error</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2.5 py-1.5 bg-error text-error-content text-xs font-medium rounded-lg whitespace-nowrap pointer-events-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity shadow-md z-700">Error</span>
</div>
</div> Requires: tw.min.css
// No JavaScript required - pure CSS component Classes Reference
| Class | Description |
|---|---|
| .tooltip | Tooltip wrapper (inline-flex) |
| .tooltip-content | The tooltip popup text |
| .tooltip-top | Position above (default) |
| .tooltip-bottom | Position below |
| .tooltip-left | Position to the left |
| .tooltip-right | Position to the right |
| .tooltip-primary | Primary color |
| .tooltip-info | Info color |
| .tooltip-success | Success color |
| .tooltip-warning | Warning color |
| .tooltip-error | Error color |