The Tooltip component provides contextual information when users hover over or focus on an element. Perfect for explaining icons, showing keyboard shortcuts, or providing additional context without cluttering the interface.
Basic Usage
<flux:tooltip content="This is helpful information">
<flux:button>Hover me</flux:button>
</flux:tooltip>
<flux:button tooltip="Save your changes">
Save
</flux:button>
Positioning
Control where the tooltip appears:
Top (Default)
Bottom
Left
Right
<flux:tooltip content="Top tooltip" position="top">
<flux:button>Top</flux:button>
</flux:tooltip>
<flux:tooltip content="Bottom tooltip" position="bottom">
<flux:button>Bottom</flux:button>
</flux:tooltip>
<flux:tooltip content="Left tooltip" position="left">
<flux:button>Left</flux:button>
</flux:tooltip>
<flux:tooltip content="Right tooltip" position="right">
<flux:button>Right</flux:button>
</flux:tooltip>
Alignment
Control how the tooltip aligns relative to the trigger:
<flux:tooltip content="Tooltip" align="start">
<flux:button>Start</flux:button>
</flux:tooltip>
<flux:tooltip content="Tooltip" align="center">
<flux:button>Center</flux:button>
</flux:tooltip>
<flux:tooltip content="Tooltip" align="end">
<flux:button>End</flux:button>
</flux:tooltip>
With Keyboard Shortcuts
Display keyboard shortcuts within tooltips:
<flux:tooltip content="Search" kbd="⌘K">
<flux:button icon="magnifying-glass" />
</flux:tooltip>
<flux:tooltip>
<flux:button icon="magnifying-glass" />
<flux:tooltip.content kbd="⌘K">
Search
</flux:tooltip.content>
</flux:tooltip>
Custom Content
Use slots for rich tooltip content:
<flux:tooltip>
<flux:button>Profile</flux:button>
<flux:tooltip.content>
<div class="space-y-1">
<div class="font-semibold">John Doe</div>
<div class="text-xs text-zinc-400">john@example.com</div>
</div>
</flux:tooltip.content>
</flux:tooltip>
<flux:tooltip interactive>
<flux:button>Hover for actions</flux:button>
<flux:tooltip.content>
<div class="space-y-2">
<a href="#" class="block hover:underline">View details</a>
<a href="#" class="block hover:underline">Edit item</a>
</div>
</flux:tooltip.content>
</flux:tooltip>
<flux:tooltip toggleable>
<flux:button>Click me</flux:button>
<flux:tooltip.content>
This tooltip opens on click instead of hover.
</flux:tooltip.content>
</flux:tooltip>
With Livewire
Control tooltip state with Livewire:
<flux:tooltip wire:model="showTooltip">
<flux:button>Controlled</flux:button>
<flux:tooltip.content>
Controlled by Livewire property
</flux:tooltip.content>
</flux:tooltip>
<flux:tooltip content="Delete item">
<flux:button icon="trash" variant="ghost" />
</flux:tooltip>
<flux:tooltip content="Edit" kbd="E">
<flux:button icon="pencil" variant="ghost" />
</flux:tooltip>
<flux:tooltip content="Settings">
<flux:button icon="cog" variant="ghost" />
</flux:tooltip>
<flux:field>
<flux:label>
API Key
<flux:tooltip content="You can find this in your account settings" position="right">
<flux:icon icon="information-circle" class="w-4 h-4 text-zinc-400" />
</flux:tooltip>
</flux:label>
<flux:input type="password" />
</flux:field>
Disabled Elements
Tooltips can wrap disabled elements:
<flux:tooltip content="This action is not available">
<flux:button disabled>
Disabled Action
</flux:button>
</flux:tooltip>
Props Reference
| Prop | Type | Default | Description |
|---|
content | string | - | Tooltip text content |
position | string | top | Tooltip position: top, bottom, left, right |
align | string | center | Tooltip alignment: start, center, end |
kbd | string | - | Keyboard shortcut to display |
interactive | boolean | false | Allow interaction with tooltip content |
toggleable | boolean | false | Open on click instead of hover |
wire:model | string | - | Livewire property for controlling state |
Accessibility
- Tooltips are triggered on both hover and focus
- Keyboard users can access tooltips when focusing interactive elements
- Tooltips automatically dismiss when focus is lost or mouse leaves
- Use
aria-label on the trigger element for screen reader users
- Interactive tooltips remain open when focused
Best Practices
- Keep It Brief: Tooltips should contain concise, helpful information
- Don’t Hide Critical Info: Never put essential information only in tooltips
- Be Consistent: Use consistent positioning throughout your app
- Mobile Consideration: Tooltips don’t work well on touch devices
- Timing: Avoid tooltips on elements with click actions (use toggleable instead)
- Dropdown - For interactive menus
- Callout - For inline contextual messages
- Modal - For more complex overlays
The Tooltip component uses <ui-tooltip> internally and automatically adds the .self modifier to wire:model for optimal performance.