Tooltip

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

Examples

Tooltip on Top

Tooltip on Bottom

Tooltip on Left

Tooltip on Right

Properties

Prop	Type	Default	Description
text	string	-	Required. The text to display inside the tooltip.
position	string	top	Options: `top`, `bottom`, `left`, `right`.

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>