Tooltip

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

Add to library

Component Code

<april:tooltip>
    <slot:trigger>
        <april:button variant="outline">Hover</april:button>
    </slot:trigger>
    <slot:content>
        <p>Add to library</p>
    </slot:content>
</april:tooltip>

<april:tooltip>
    <slot:trigger>
        <april:button variant="outline">Hover</april:button>
    </slot:trigger>
    <slot:content>
        <p>Add to library</p>
    </slot:content>
</april:tooltip>

Silencing a tooltip

Pass :disabled="true" to keep a tooltip mounted but quiet. Bind it when a tooltip only helps some of the time, such as a sidebar label that the reader can already see once the sidebar opens.

<april:tooltip x-effect="tooltipDisabled = sidebar.state !== 'collapsed'">
    <slot:trigger>...</slot:trigger>
    <slot:content>Boarding</slot:content>
</april:tooltip>

A silenced tooltip keeps its trigger and its aria-describedby, so nothing moves on the page when you turn it off.

Publishing Views

Use the following command to publish this view:

php artisan april:publish tooltip

April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run:

php artisan april:publish --all

Review local overrides after an upgrade with `php artisan april:update --diff`.