Tooltip

component

A short text shown while a control is hovered or focused, also announced as its description.

Install

php bin/console ux:install tooltip \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: assets/ → assets/
templates/ → templates/
Recipes: floating
Composer: twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (1)

Default

Light

Dark

Code

<div class="flex gap-4 pt-12">
    <twig:Tooltip content="Saved 2 minutes ago" id="tooltip-saved">
        <twig:Button variant="outline">Saved</twig:Button>
    </twig:Tooltip>
    <twig:Tooltip content="Delete the draft" placement="bottom" id="tooltip-delete">
        <twig:Button variant="outline" size="icon" aria-label="Delete">
            <twig:ux:icon name="flowbite:close-outline" class="size-5" aria-hidden="true" />
        </twig:Button>
    </twig:Tooltip>
</div>