Tooltip

Provide additional information when users hover over or focus on an element. When on touch devices, the tooltip will be triggered on long press.

<x-tooltip content="Settings">
    <x-button icon="o-cog-6-tooth" />
</x-tooltip>

As a shorthand, you can pass a


    tooltip

prop into a button component directly.

<x-button tooltip="Settings" icon="o-cog-6-tooth" />

Or a longhand, you can build the tooltip component manually.

<x-tooltip>
    <x-button icon="o-cog-6-tooth" icon-variant="outline" />
    <x-tooltip.content>
        Settings
    </x-tooltip.content>
</x-tooltip>

Toggleable

You can change the trigger to click by passing


    toggleable

prop.

Tax identification number

<x-heading class="flex items-center gap-2">
    Tax identification number
 
    <x-tooltip toggleable position="bottom">
        <x-button icon="o-information-circle" size="sm" variant="ghost" />
 
        <x-tooltip.content class="max-w-[20rem] space-y-2">
            <p>For US businesses, enter your 9-digit Employer Identification Number (EIN) without hyphens.</p>
            <p>For European companies, enter your VAT number including the country prefix (e.g., DE123456789).</p>
        </x-tooltip.content>
    </x-tooltip>
</x-heading>

Positioning

Customize the position of the tooltip menu via


    position

props, the default value is

top

You can first pass the base position:

top , top-start , top-end .
bottom , bottom-start , bottom-end .
left , left-start , left-end .
right , right-start , right-end .

<x-tooltip content="Settings" position="top">...</x-tooltip>
<x-tooltip content="Settings" position="bottom">...</x-tooltip>
<x-tooltip content="Settings" position="left">...</x-tooltip>
<x-tooltip content="Settings" position="right">...</x-tooltip>

As a shorthand, you can pass a


    tooltip-position

prop into a button component directly.

<x-button tooltip="Settings" tooltip-position="top" icon="o-cog-6-tooth" />

Offset

Customize the offset of the tooltip via


    offset

props. These properties accept values in pixels, the default value is

<x-tooltip content="Settings" offset="6">...</x-tooltip>
<x-tooltip content="Settings" offset="12">...</x-tooltip>
<x-tooltip content="Settings" offset="18">...</x-tooltip>
<x-tooltip content="Settings" offset="24">...</x-tooltip>

As a shorthand, you can pass a


    tooltip-offset

prop into a button component directly.

<x-button tooltip="Settings" tooltip-offset="12" icon="o-cog-6-tooth" />