Tooltip

Use RzTooltip to show concise contextual hints for buttons, links, and icons. Wrap related tooltips in a TooltipProvider when you want shared delay settings.

TooltipProvider with nested tooltips

This example wraps a section with TooltipProvider and shows nested RzTooltip components using TooltipTrigger and TooltipContent.

Source

<TooltipProvider DelayDuration="250" SkipDelayDuration="300">
    <section class="flex flex-wrap items-center gap-4">
        <RzTooltip>
            <TooltipTrigger AsChild>
                <RzButton Variant="ThemeVariant.Primary">Save</RzButton>
            </TooltipTrigger>
            <TooltipContent>
                Save your current changes.
            </TooltipContent>
        </RzTooltip>

        <RzTooltip>
            <TooltipTrigger AsChild>
                <RzButton Variant="ThemeVariant.Secondary">Share</RzButton>
            </TooltipTrigger>
            <TooltipContent Anchor="AnchorPoint.Top">
                Invite collaborators to this document.
            </TooltipContent>
        </RzTooltip>
    </section>
</TooltipProvider>

Minimal tooltip

A direct equivalent to the common pattern <Tooltip><TooltipTrigger>...</TooltipTrigger><TooltipContent>...</TooltipContent></Tooltip>, using RizzyUI names.

Source

<RzTooltip>
    <TooltipTrigger AsChild>
        <RzButton Variant="ThemeVariant.Secondary">Hover me</RzButton>
    </TooltipTrigger>
    <TooltipContent>
        A simple tooltip.
    </TooltipContent>
</RzTooltip>