Tooltip

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

Examples

Positions

Tooltips can be positioned on any side of the element.

Tooltip on Top

Tooltip on Bottom

Tooltip on Left

Tooltip on Right

blade

<div class="flex flex-wrap items-center gap-12 py-8">
    <x-plume::tooltip text="Tooltip on Top">
        <x-plume::button style="outline">Top</x-plume::button>
    </x-plume::tooltip>

    <x-plume::tooltip text="Tooltip on Bottom" position="bottom">
        <x-plume::button style="outline">Bottom</x-plume::button>
    </x-plume::tooltip>

    <x-plume::tooltip text="Tooltip on Left" position="left">
        <x-plume::button style="outline">Left</x-plume::button>
    </x-plume::tooltip>

    <x-plume::tooltip text="Tooltip on Right" position="right">
        <x-plume::button style="outline">Right</x-plume::button>
    </x-plume::tooltip>
</div>

Prop	Type	Default	Description
text	string	null	The text to display in the tooltip.
position	string	'top'	Tooltip position (top, bottom, left, right).
onShow	string	null	AlpineJS expression or function to call when the tooltip is shown.
onHide	string	null	AlpineJS expression or function to call when the tooltip is hidden.

Usage

blade

<x-plume::tooltip text="Helpful information" position="top">
    <x-plume::button style="ghost" shape="round">
        <x-plume::icon i="icon-[fluent--info-24-regular]" />
    </x-plume::button>
</x-plume::tooltip>