Skip to main content
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>

​
Using Button Tooltip Shorthand

Buttons have built-in tooltip support: 
<flux:button tooltip="Save your changes">
    Save
</flux:button>

​
Positioning

Control where the tooltip appears: 
<flux:tooltip content="Top tooltip" position="top">
    <flux:button>Top</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>
Or using the content slot: 
<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>

​
Interactive Tooltips

Allow users to interact with tooltip content: 
<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>
Interactive tooltips don’t dismiss when the user moves their mouse into the tooltip content.

​
Toggleable Tooltips

Create click-to-open tooltips: 
<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>

​
Icon Tooltips

Provide context for icon-only buttons: 
<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>

​
Form Field Hints

Provide additional context for form fields: 
<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

PropTypeDefaultDescription
contentstring-Tooltip text content
positionstringtopTooltip position: top, bottom, left, right
alignstringcenterTooltip alignment: start, center, end
kbdstring-Keyboard shortcut to display
interactivebooleanfalseAllow interaction with tooltip content
toggleablebooleanfalseOpen on click instead of hover
wire:modelstring-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

  1. Keep It Brief: Tooltips should contain concise, helpful information
  2. Don’t Hide Critical Info: Never put essential information only in tooltips
  3. Be Consistent: Use consistent positioning throughout your app
  4. Mobile Consideration: Tooltips don’t work well on touch devices
  5. 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.