Tooltip

A minimal, responsive tooltip that supports hover, focus, and touch. Auto-positions to stay within the viewport and closes on outside click or Escape.

Usage

Blade components: x-hui::tooltip, x-hui::tooltip.content

<x-hui::tooltip>
    Hover or tap me

    <x-hui::tooltip.content>
        Tooltip content goes here.
    </x-hui::tooltip.content>
</x-hui::tooltip>

[!NOTE]

• Works with mouse (hover), keyboard (focus), and touch (tap to show, tap outside to close).
• Positions itself above by default, flips to another side if needed, and clamps within the viewport.

With arrow

<x-hui::tooltip>
    Hover me

    <x-hui::tooltip.content arrow>
        Tooltip with arrow
    </x-hui::tooltip.content>
</x-hui::tooltip>

Position preference

<x-hui::tooltip>
    Left Pref
    <x-hui::tooltip.content arrow position="left">
        I prefer left, will flip if needed.
    </x-hui::tooltip.content>
</x-hui::tooltip>

<x-hui::tooltip>
    Bottom Pref
    <x-hui::tooltip.content arrow position="bottom">
        I prefer bottom, will flip if needed.
    </x-hui::tooltip.content>
</x-hui::tooltip>

Open by default

<x-hui::tooltip open>
    Hover me
    <x-hui::tooltip.content arrow>Opened by default</x-hui::tooltip.content>
</x-hui::tooltip>

Disabled

<x-hui::tooltip disabled>
    Hover me
    <x-hui::tooltip.content>Will not open (disabled)</x-hui::tooltip.content>
</x-hui::tooltip>

When combined with open, the tooltip stays visible and cannot be closed until the attributes change.

Nested tooltips

<x-hui::tooltip open>
    Hover me
    <x-hui::tooltip.content>
        <x-hui::tooltip>
            Hover me nested
            <x-hui::tooltip.content>
                Nested content
            </x-hui::tooltip.content>
        </x-hui::tooltip>
    </x-hui::tooltip.content>
</x-hui::tooltip>

Styling

The content panel uses position: fixed and z-index: 9999. Override with your own classes.

<x-hui::tooltip>
    Trigger
    <x-hui::tooltip.content class="rounded-lg bg-zinc-900 px-3 py-1.5 text-sm text-white shadow-lg">
        Styled tooltip
    </x-hui::tooltip.content>
</x-hui::tooltip>

Props

Tooltip

TooltipContent

Accessibility

Keyboard

ARIA

• The tooltip content has role="tooltip".
• aria-hidden is toggled (true/false) based on visibility.
• The tooltip opens on focus and closes on blur, making it keyboard-accessible without additional interaction.