Tooltip

A popup that displays information related to an element on hover

SSR mode

Divergence from Blok

CSS-only hover; no Radix portal. Blok wraps Radix UI's Tooltip primitive which uses a portal and JS-computed positioning. BlazorUI's Tooltip uses a pure CSS group-hover mechanism plus CSS Anchor Positioning (position-anchor + position-area) to anchor a position: fixed tooltip to its trigger. The fixed positioning means the tooltip escapes ancestor overflow clipping — useful for nav menus and other scrollable containers — without needing JS or a portal. Requires a Chromium-based browser (Chrome / Edge 125+); Firefox and Safari support is shipping. TooltipProvider is intentionally not implemented (no central delay coordination is needed — see Delay below).

Improvement: per-tooltip Delay on TooltipContent. Blok / Radix expose a single Provider-level delayDuration. We attach an optional Delay (milliseconds) directly to TooltipContent so each tooltip can opt in to a hover delay independently. The delay applies only on hover-in; hover-out stays instant.

Improvement: ClassName on Tooltip root. Blok's root is a Radix context provider with no DOM. Our root renders the positioning context (relative inline-flex group/tooltip), so we expose ClassName to let consumers tweak its layout without losing the group/tooltip wiring (e.g. flex-1 min-w-0 when the trigger needs to fill a flex row).

Text colour: text-white, not text-inverse-text. Blok's source uses text-inverse-text on the bg-gray-700 tooltip surface. Our token --color-inverse-text flips to a dark colour in dark mode (which is correct on light surfaces like buttons) — but the tooltip surface is hardcoded gray-700 in both modes, so the inverted token would render dark text on a dark surface. We use text-white literal to keep tooltip text readable in dark mode.

Examples

Bottom (default)

Top

Left

Rich content

With 1-second delay

API

The element family below can be composed together. Click an element to jump to its properties.

Element Purpose
Tooltip Root wrapper that sets up the CSS group used to drive hover-based visibility of the TooltipContent child.
TooltipTrigger Wraps the element that activates the tooltip on hover. Renders an inline-flex <span> around its child.
TooltipContent The popup body shown on trigger hover. Positioned via Side relative to the trigger's nearest positioned ancestor.

Tooltip

Root wrapper that sets up the CSS group used to drive hover-based visibility of the TooltipContent child.

Property Type Required Description
ChildContent RenderFragment? Must contain a TooltipTrigger and a TooltipContent.
ClassName string? Extra CSS classes appended to the root wrapper. Useful when the tooltip needs to participate in its parent's layout (e.g. flex-1 min-w-0 to fill a flex row).

TooltipTrigger

Wraps the element that activates the tooltip on hover. Renders an inline-flex <span> around its child.

Property Type Required Description
ClassName string? Extra CSS classes appended to the trigger wrapper.
ChildContent RenderFragment? The element the user hovers over — usually a Button or icon.
AdditionalAttributes Dictionary<string, object>? Captured unmatched attributes, forwarded to the trigger wrapper.

TooltipContent

The popup body shown on trigger hover. Positioned via Side relative to the trigger's nearest positioned ancestor.

Property Type Required Description
Side TooltipSide Placement relative to the trigger. Default: TooltipSide.Bottom. Other values: Top, Left, Right.
Delay int Hover-in delay in milliseconds before the tooltip appears. Default 0 (immediate). Rounds up to the nearest bucket: 200, 500, 700, 1000, 1500, 2000. Hover-out is always instant.
ClassName string? Extra CSS classes appended to the tooltip body.
ChildContent RenderFragment? Tooltip content — plain text or inline markup.
AdditionalAttributes Dictionary<string, object>? Captured unmatched attributes, forwarded to the tooltip body.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.