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>

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.

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.