Skip to content

Overview

The <x-aura::tooltip> component renders a small popup label that appears when the user hovers over or focuses on the wrapped element. It supports four positioning options, a configurable appearance delay, and smooth enter/leave transitions powered by Alpine.js. Tooltips are ideal for providing brief contextual help or labeling icon-only buttons.

Basic Usage

<x-aura::tooltip text="This is a tooltip">
    <x-aura::button>Hover me</x-aura::button>
</x-aura::tooltip>

Props

Prop Type Default Description
text string '' The text content displayed inside the tooltip.
position string 'top' Where the tooltip appears relative to the trigger element. Options: top, bottom, left, right.
delay int 200 Delay in milliseconds before the tooltip appears on hover.

Slots

Slot Description
Default ($slot) The trigger element that the user hovers or focuses to reveal the tooltip.

Variants / Examples

Position Variants

<div class="flex items-center gap-8">
    <x-aura::tooltip text="Top tooltip" position="top">
        <x-aura::button variant="outline">Top</x-aura::button>
    </x-aura::tooltip>

    <x-aura::tooltip text="Bottom tooltip" position="bottom">
        <x-aura::button variant="outline">Bottom</x-aura::button>
    </x-aura::tooltip>

    <x-aura::tooltip text="Left tooltip" position="left">
        <x-aura::button variant="outline">Left</x-aura::button>
    </x-aura::tooltip>

    <x-aura::tooltip text="Right tooltip" position="right">
        <x-aura::button variant="outline">Right</x-aura::button>
    </x-aura::tooltip>
</div>

Icon Button with Tooltip

<x-aura::tooltip text="Edit this item">
    <button class="p-2 rounded-lg hover:bg-gray-100">
        <x-aura::icon name="pencil" size="md" />
    </button>
</x-aura::tooltip>

Toolbar Actions

<div class="flex items-center gap-1 p-2 bg-gray-50 rounded-lg">
    <x-aura::tooltip text="Bold" position="bottom">
        <button class="p-2 rounded hover:bg-gray-200">
            <x-aura::icon name="bold" size="sm" />
        </button>
    </x-aura::tooltip>

    <x-aura::tooltip text="Italic" position="bottom">
        <button class="p-2 rounded hover:bg-gray-200">
            <x-aura::icon name="italic" size="sm" />
        </button>
    </x-aura::tooltip>

    <x-aura::tooltip text="Underline" position="bottom">
        <button class="p-2 rounded hover:bg-gray-200">
            <x-aura::icon name="underline" size="sm" />
        </button>
    </x-aura::tooltip>

    <x-aura::tooltip text="Insert Link" position="bottom">
        <button class="p-2 rounded hover:bg-gray-200">
            <x-aura::icon name="link" size="sm" />
        </button>
    </x-aura::tooltip>
</div>

Custom Delay

Instant tooltip
Slow tooltip 
<x-aura::tooltip text="This appears instantly" :delay="0">
    <span class="underline decoration-dotted cursor-help">Instant tooltip</span>
</x-aura::tooltip>

<x-aura::tooltip text="This appears after 500ms" :delay="500">
    <span class="underline decoration-dotted cursor-help">Slow tooltip</span>
</x-aura::tooltip>

Informational Tooltip on Text

Your account is currently on the

Pro plan
. 

<p>
    Your account is currently on the
    <x-aura::tooltip text="The Pro plan includes unlimited projects, priority support, and advanced analytics.">
        <span class="font-semibold underline decoration-dotted cursor-help">Pro plan</span>
    </x-aura::tooltip>.
</p>

Accessibility

  • The tooltip element has role="tooltip" for proper semantic identification by assistive technologies.
  • The tooltip is triggered on both mouseenter (for mouse users) and focus (for keyboard users), and hidden on mouseleave and blur.
  • The tooltip includes an arrow indicator (aura-tooltip-arrow) that visually connects the popup to its trigger element, reinforcing the spatial relationship.
  • For icon-only buttons wrapped in a tooltip, ensure the button itself has an aria-label attribute as a fallback, since the tooltip content is not always available to screen readers during navigation.