Tooltip
Small contextual label appearing on hover or focus. Directional, colour-coded, delay-aware, and rich-content variants included.
Position
Four directional placements via DaisyUI — CSS-only, zero JS required.
Colour Variants
DaisyUI semantic colour modifiers — one extra class, no custom CSS.
Content Density
Tooltip width adapts to text — from a single word to a full warning sentence that wraps across multiple lines.
Delay on Show
Alpine.js holds a timer before revealing the tooltip — prevents flickering on accidental hover-through.
Rich Content
HTML inside the tooltip: avatars, keyboard shortcuts, status lists. Positioned with Floating UI — auto-flips near viewport edges.
Click Trigger
Toggles on click, dismisses on outside-click or Esc. Useful on touch devices and for persistent reference info.
States
Disabled elements need a wrapper span (disabled buttons don't fire mouse events). Always-open forces the tooltip visible for documentation purposes.