Tooltip
A popup that displays information related to an element on hover
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
Right
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. |