blatui

Components

Tooltip

A popup that displays information related to an element when hovered or focused.

php artisan blatui:add tooltip 
<x-ui.tooltip>
    <x-ui.tooltip-trigger>
        <x-ui.button variant="outline">Hover</x-ui.button>
    </x-ui.tooltip-trigger>
    <x-ui.tooltip-content>
        Add to library
    </x-ui.tooltip-content>
</x-ui.tooltip>

Colors

{{-- Recolour the tooltip — the arrow inherits the background, so it always matches. --}}
<div class="flex items-center gap-3">
    <x-ui.tooltip>
        <x-ui.tooltip-trigger>
            <x-ui.button variant="outline">Light</x-ui.button>
        </x-ui.tooltip-trigger>
        <x-ui.tooltip-content class="bg-popover text-popover-foreground border shadow-md">
            Light tooltip
        </x-ui.tooltip-content>
    </x-ui.tooltip>

    <x-ui.tooltip>
        <x-ui.tooltip-trigger>
            <x-ui.button variant="outline">Error</x-ui.button>
        </x-ui.tooltip-trigger>
        <x-ui.tooltip-content class="bg-destructive text-white">
            Something went wrong
        </x-ui.tooltip-content>
    </x-ui.tooltip>
</div>

Delayed

<x-ui.tooltip :delay="500">
    <x-ui.tooltip-trigger><x-ui.button variant="outline">Hover and wait</x-ui.button></x-ui.tooltip-trigger>
    <x-ui.tooltip-content>Appears after a 500ms delay</x-ui.tooltip-content>
</x-ui.tooltip>

Icon Button

<x-ui.tooltip>
    <x-ui.tooltip-trigger>
        <x-ui.button variant="outline" size="icon" aria-label="Add to library"><x-lucide-plus aria-hidden="true" /></x-ui.button>
    </x-ui.tooltip-trigger>
    <x-ui.tooltip-content>Add to library</x-ui.tooltip-content>
</x-ui.tooltip>

No Arrow

{{-- Hide the pointer with the `arrow` prop. --}}
<x-ui.tooltip>
    <x-ui.tooltip-trigger>
        <x-ui.button variant="outline">Hover</x-ui.button>
    </x-ui.tooltip-trigger>
    <x-ui.tooltip-content :arrow="false">
        No arrow tooltip
    </x-ui.tooltip-content>
</x-ui.tooltip>

Rich Content

{{-- Multi-line content with a title and a keyboard hint. --}}
<x-ui.tooltip>
    <x-ui.tooltip-trigger>
        <x-ui.button variant="outline">Hover for details</x-ui.button>
    </x-ui.tooltip-trigger>
    <x-ui.tooltip-content class="max-w-xs px-3 py-2">
        <p class="font-medium">Keyboard shortcut</p>
        <p class="text-primary-foreground/80 mt-1">Press <x-ui.kbd class="bg-primary-foreground/15 text-primary-foreground border-0">⌘</x-ui.kbd> <x-ui.kbd class="bg-primary-foreground/15 text-primary-foreground border-0">K</x-ui.kbd> to open the command menu.</p>
    </x-ui.tooltip-content>
</x-ui.tooltip>

Row Actions

{{-- A tooltip on a control that opens an overlay — the row-actions shape: an icon button
     that both explains itself on hover and asks for confirmation on click. The two have to
     hand off cleanly, because closing the dialog returns focus to the button underneath. --}}
<div class="flex items-center gap-2">
    <x-ui.tooltip>
        <x-ui.tooltip-trigger>
            <x-ui.alert-dialog-trigger for="tooltip-row-delete">
                <x-ui.button variant="ghost" size="icon" class="text-destructive" aria-label="Delete row">
                    <x-lucide-trash-2 aria-hidden="true" />
                </x-ui.button>
            </x-ui.alert-dialog-trigger>
        </x-ui.tooltip-trigger>
        <x-ui.tooltip-content side="left">Delete</x-ui.tooltip-content>
    </x-ui.tooltip>

    <x-ui.tooltip>
        <x-ui.tooltip-trigger>
            <x-ui.button variant="ghost" size="icon" aria-label="Duplicate row">
                <x-lucide-copy aria-hidden="true" />
            </x-ui.button>
        </x-ui.tooltip-trigger>
        <x-ui.tooltip-content>Duplicate</x-ui.tooltip-content>
    </x-ui.tooltip>
</div>

<x-ui.alert-dialog id="tooltip-row-delete">
    <x-ui.alert-dialog-content>
        <x-ui.alert-dialog-header>
            <x-ui.alert-dialog-title>Delete this row?</x-ui.alert-dialog-title>
            <x-ui.alert-dialog-description>
                This permanently deletes the row. This action cannot be undone.
            </x-ui.alert-dialog-description>
        </x-ui.alert-dialog-header>
        <x-ui.alert-dialog-footer>
            <x-ui.alert-dialog-cancel>Cancel</x-ui.alert-dialog-cancel>
            <x-ui.alert-dialog-action class="bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20">Delete</x-ui.alert-dialog-action>
        </x-ui.alert-dialog-footer>
    </x-ui.alert-dialog-content>
</x-ui.alert-dialog>

Sides

<div class="flex flex-wrap items-center justify-center gap-3">
    <x-ui.tooltip>
        <x-ui.tooltip-trigger><x-ui.button variant="outline">Top</x-ui.button></x-ui.tooltip-trigger>
        <x-ui.tooltip-content side="top">Top tooltip</x-ui.tooltip-content>
    </x-ui.tooltip>
    <x-ui.tooltip>
        <x-ui.tooltip-trigger><x-ui.button variant="outline">Right</x-ui.button></x-ui.tooltip-trigger>
        <x-ui.tooltip-content side="right">Right tooltip</x-ui.tooltip-content>
    </x-ui.tooltip>
    <x-ui.tooltip>
        <x-ui.tooltip-trigger><x-ui.button variant="outline">Bottom</x-ui.button></x-ui.tooltip-trigger>
        <x-ui.tooltip-content side="bottom">Bottom tooltip</x-ui.tooltip-content>
    </x-ui.tooltip>
    <x-ui.tooltip>
        <x-ui.tooltip-trigger><x-ui.button variant="outline">Left</x-ui.button></x-ui.tooltip-trigger>
        <x-ui.tooltip-content side="left">Left tooltip</x-ui.tooltip-content>
    </x-ui.tooltip>
</div>

API Reference

Props, slots and exposed methods for <x-ui.tooltip>.

Props

Prop Type Default Description
delay int 0 Milliseconds to wait after hover or focus before the tooltip opens.
state string 'open' Since 1.23. Set on <x-ui.tooltip-content>. The Alpine expression driving visibility. Override it when the tooltip sits in a scope where <code>open</code> already means something else — <x-ui.sidebar-menu-button> uses it to drive a tooltip from its own state while the surrounding collapsible keeps <code>open</code>.

Slots

Slot Description
default The tooltip composition: an <x-ui.tooltip-trigger> wrapping the element that opens the tooltip, and an <x-ui.tooltip-content> holding the tooltip text. Content is teleported to <body> and anchored to the trigger.
trigger Use <x-ui.tooltip-trigger> for the hover/focus target. Wrap a button or any focusable element so keyboard users can reveal the tooltip.
content Use <x-ui.tooltip-content> for the floating panel. It accepts side (top, right, bottom, left), align (start, center, end), sideOffset (px) and arrow (bool). Recolor it by passing background/text classes via class.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method Description
show() Open the tooltip after the configured delay.
hide() Cancel any pending delay and close the tooltip immediately.