Skip to main content
Fluid Primitives

Tooltip

A popup that appears when an element is hovered or focused, showing a hint for sighted users.

View Sourcefor Tooltip componentZag.js Docsfor Tooltip component
Example.html
<primitives:tooltip.root>
    <primitives:tooltip.trigger asChild="{true}">
        <ui:button>Hover me</ui:button>
    </primitives:tooltip.trigger>
    <ui:portal>
        <primitives:tooltip.positioner class="[--arrow-size:8px] [--arrow-background:var(--color-popover)]">
            <primitives:tooltip.content class="{ui:cn(value: '
                text-sm bg-popover py-0.5 px-1.5 rounded-md border
                transition-all ease-out duration-150 transition-discrete 
                starting:data-[state=open]:opacity-0 starting:data-[state=open]:scale-97 starting:data-[state=open]:translate-y-0.5 starting:data-[state=open]:blur-[2px]
                data-[state=closed]:opacity-0 data-[state=closed]:scale-97 data-[state=closed]:translate-y-0.5 data-[state=closed]:blur-[2px]
                data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[state=open]:translate-0 data-[state=open]:blur-0
                {class}
            ')}">
                <primitives:tooltip.arrow class="border-l border-t" />
                This is the tooltip content.
            </primitives:tooltip.content>
        </primitives:tooltip.positioner>
    </ui:portal>
</primitives:tooltip.root>

<vite:asset entry="EXT:fluid_primitives/Resources/Public/JavaScript/dist/tooltip.entry.js" />

Installation

typo3 ui:add tooltip

Read more about installing Components and Primitives.

Usage

<ui:tooltip.root>
    <ui:tooltip.trigger asChild="{true}">
        <ui:button>Hover me</ui:button>
    </ui:tooltip.trigger>
    <ui:tooltip.content> This is the tooltip content. </ui:tooltip.content>
</ui:tooltip.root>

Anatomy

<primitives:tooltip.root>
    <primitives:tooltip.trigger />
    <primitives:tooltip.positioner>
        <primitives:tooltip.content>
            <primitives:tooltip.arrow />
        </primitives:tooltip.content>
    </primitives:tooltip.positioner>
</primitives:tooltip.root>