Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. Requires Alpine.js.

Usage
Add to library
example.blade.php 
<x-slate::tooltip label="Add to library">
    <x-slate::button variant="outline" size="icon" aria-label="Add">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M5 12h14" stroke-linecap="round" />
            <path d="M12 5v14" stroke-linecap="round" />
        </svg>
    </x-slate::button>
</x-slate::tooltip>

Sides

Use logical sides: top, bottom, start, end.

Top
End
Bottom
Start
example.blade.php 
<div class="flex flex-wrap items-center justify-center gap-6">
    <x-slate::tooltip label="Top" side="top">
        <x-slate::button variant="outline" size="sm">Top</x-slate::button>
    </x-slate::tooltip>
    <x-slate::tooltip label="End" side="end">
        <x-slate::button variant="outline" size="sm">End</x-slate::button>
    </x-slate::tooltip>
    <x-slate::tooltip label="Bottom" side="bottom">
        <x-slate::button variant="outline" size="sm">Bottom</x-slate::button>
    </x-slate::tooltip>
    <x-slate::tooltip label="Start" side="start">
        <x-slate::button variant="outline" size="sm">Start</x-slate::button>
    </x-slate::tooltip>
</div>

With content slot
Press ⌘ K
example.blade.php 
<x-slate::tooltip side="bottom">
    <x-slot:content>
        <span class="inline-flex items-center gap-1.5">
            Press <x-slate::kbd>⌘</x-slate::kbd> <x-slate::kbd>K</x-slate::kbd>
        </span>
    </x-slot:content>
    <x-slate::button variant="secondary">Shortcuts</x-slate::button>
</x-slate::tooltip>

Composition
code 
Tooltip
├── TooltipTrigger
└── TooltipContent
Composed tooltip
example.blade.php 
<x-slate::tooltip>
    <x-slate::tooltip-trigger>
        <x-slate::button variant="outline">Hover</x-slate::button>
    </x-slate::tooltip-trigger>
    <x-slate::tooltip-content side="top">
        Composed tooltip
    </x-slate::tooltip-content>
</x-slate::tooltip>

API Reference

Tooltip
Prop Type Default Description
label string — Progressive tooltip text
side top | bottom | start | end top Preferred side
open bool false Initial open state

Named slot: content for rich tooltip markup.

Last updated .