Tooltip

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

Basic

Hover over the button to see the tooltip.

<Tooltip>
    <TooltipTrigger>
        <Button Variant="ButtonVariant.Outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
        <p>Add to library</p>
    </TooltipContent>
</Tooltip>

Custom Delay

Configure the delay before showing the tooltip.

<Tooltip DelayDuration="0">
    <TooltipTrigger>
        <Button>No delay</Button>
    </TooltipTrigger>
    <TooltipContent>
        <p>Shows immediately</p>
    </TooltipContent>
</Tooltip>

<Tooltip DelayDuration="1000">
    <TooltipTrigger>
        <Button>1s delay</Button>
    </TooltipTrigger>
    <TooltipContent>
        <p>1 second delay</p>
    </TooltipContent>
</Tooltip>