Tooltip

x-tooltip

A lightweight, pure-Alpine tooltip that appears on hover or focus, with four positions and an optional arrow.

php artisan components:add tooltip

Playground

position content arrow delay

Examples

Placements

Hover or focus the trigger to see the tooltip.

<div class="flex min-h-40 w-full flex-wrap items-center justify-center gap-6">
    <x-components.tooltip content="Top tooltip" position="top">
        <x-components.button variant="secondary">Hover me</x-components.button>
    </x-components.tooltip>
    <x-components.tooltip content="Now to the right" position="right">
        <x-components.button variant="secondary">And me</x-components.button>
    </x-components.tooltip>
    <x-components.tooltip content="Below the button" position="bottom">
        <x-components.button variant="secondary">Me too</x-components.button>
    </x-components.tooltip>
</div>

Props

Prop	Type	Default	Description
`position`	select top · bottom · left · right	`top`	Where the tooltip appears relative to the trigger.
`content`	text	`—`	Tooltip text. Use the 'tip' slot for rich content.
`arrow`	boolean	`true`	Show the little pointer arrow.
`delay`	text	`100`	Delay in milliseconds before showing.

Slots

Slot	Description
`slot`	The element the tooltip is attached to.
`tip`	Rich tooltip content (overrides the content prop).