Components / Tooltip

Tooltip

A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it: role="tooltip", collision-aware, portaled to the body. The behaviour comes from the brain; this preview is the real component running in WebAssembly.

Examples

razor
<ZitsTooltip>
    <ZitsTooltipTrigger class="...">Hover</ZitsTooltipTrigger>
    <ZitsTooltipContent>Add to library</ZitsTooltipContent>
</ZitsTooltip>

Installation

Terminal bash
navius add tooltip

API reference

Compose four parts: ZitsTooltipProvider (optional, shares timing), ZitsTooltip (root), ZitsTooltipTrigger, and ZitsTooltipContent.

ZitsTooltip

Prop Type Default
Open bool false
OpenChanged EventCallback<bool> -
DefaultOpen bool false
DelayDuration int 0

ZitsTooltipContent

Prop Type Default
Side string "top"
Align string "center"
SideOffset double 0
AlignOffset double 0
AvoidCollisions bool true

ZitsTooltipProvider

Prop Type Default
DelayDuration int 0
SkipDelayDuration int 300
DisableHoverableContent bool false