Skip to content
Navius

Tooltip

Overview

Section titled “Overview”

Tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It opens on hover after a configurable delay and instantly on keyboard focus; it can be controlled (@bind-Open) or uncontrolled (DefaultOpen). Content self-portals to document.body, escaping overflow and stacking clip.

Anatomy

Section titled “Anatomy”
@using Navius.Primitives.Components.Tooltip


<NaviusTooltipProvider>
    <NaviusTooltip>
        <NaviusTooltipTrigger />
        <NaviusTooltipPositioner>
            <NaviusTooltipPopup>
                <NaviusTooltipArrow />
            </NaviusTooltipPopup>
        </NaviusTooltipPositioner>
    </NaviusTooltip>
</NaviusTooltipProvider>

Provider

Section titled “Provider”

Cascades shared delay, skip-delay, and hoverable defaults to every tooltip beneath it. Renders no DOM. Wrap once near the app root.

Prop Type Default Description
DelayDuration int 700 Default delay (ms) before tooltips open on hover. Inherited by tooltips that don’t set their own DelayDuration.
SkipDelayDuration int 300 Grace window (ms) after a tooltip closes during which the next tooltip opens instantly (data-instant).
DisableHoverableContent bool false When true, tooltips close on trigger leave even when the pointer moves over the content.
ChildContent RenderFragment? - Tooltips beneath the provider.

Root

Section titled “Root”

Owns the open state and the show/hide timing. Renders no DOM.

Prop Type Default Description
Open bool false Controlled open state. Pair with OpenChanged (@bind-Open).
OpenChanged EventCallback<bool> - Fires when the controlled Open value should change.
DefaultOpen bool false Initial open state when used uncontrolled.
DelayDuration int? - Hover-intent delay (ms) before opening. Falls back to the provider’s DelayDuration (or 700ms). Keyboard focus opens with no delay.
OpenDelay int 200 Legacy alias for DelayDuration, kept for back-compat.
DisableHoverableContent bool? - When true, the tooltip stays open while the pointer moves over the content is disabled (overrides the provider).
ChildContent RenderFragment? - The Trigger and Positioner/Popup.

Trigger

Section titled “Trigger”

The control that opens the tooltip on hover or focus. Renders a button.

Prop Type Default Description
ChildContent RenderFragment? - Trigger content.
Attributes IDictionary<string, object>? - Forwarded to the rendered button.
Section titled “Popup”

The tooltip bubble, self-portaled to the body and wrapped by the Positioner that anchors it against the trigger. Renders a div with role="tooltip". The Side / Align / SideOffset / AlignOffset / AvoidCollisions / CollisionPadding / Sticky / HideWhenDetached / ArrowPadding props are set on the enclosing NaviusTooltipPositioner part (a real anatomy part not broken out into its own section here).

Prop Type Default Description
Side string "top" Preferred side (set on the Positioner).
Align string "center" Alignment along the side (set on the Positioner).
SideOffset double 6 Distance in px from the trigger along the side (set on the Positioner).
AlignOffset double 0 Offset in px along the alignment axis (set on the Positioner).
AvoidCollisions bool true Avoid collisions with the viewport boundary (set on the Positioner).
CollisionPadding double? - Padding in px between the popup and the collision boundary (set on the Positioner).
Sticky string? - Sticky behavior while scrolling: "partial" | "always" (set on the Positioner).
HideWhenDetached bool false Hide the popup when the trigger is fully clipped/detached (set on the Positioner).
ArrowPadding double 0 Padding in px between the arrow and the popup edges (set on the Positioner).
KeepMounted bool false Keeps the popup mounted while closed, for exit animations.
Container string? - CSS selector for the portal mount target (optional; set via an undocumented NaviusTooltipPortal wrapper). null uses document.body.
OnEscapeKeyDown EventCallback<NaviusEscapeKeyDownEventArgs> - Fires on Escape; cancelable.
OnPointerDownOutside EventCallback<NaviusPointerDownOutsideEventArgs> - Fires on pointer-down outside the popup; cancelable.
ChildContent RenderFragment? - The tooltip’s content and optional Arrow.
Attributes IDictionary<string, object>? - Forwarded to the rendered div.

Arrow

Section titled “Arrow”

An optional SVG triangle the positioner rotates to point at the trigger. Place inside Popup. Renders an svg.

Prop Type Default Description
Width double 10 Arrow width in px.
Height double 5 Arrow height in px.
Attributes IDictionary<string, object>? - Forwarded to the rendered svg.

Data attributes

Section titled “Data attributes”
Part Attribute Description
Trigger data-popup-open Present while the tooltip is open.
Popup data-open Present while open.
Popup data-closed Present while closing (through the exit transition).
Popup data-instant Present when the tooltip opened instantly (no hover delay).
Popup data-starting-style Present at the start of the open transition.
Popup data-ending-style Present at the start of the close transition.
Popup data-side "top" | "right" | "bottom" | "left"
Popup data-align "start" | "center" | "end"
Arrow data-side "top" | "right" | "bottom" | "left"

Keyboard interactions

Section titled “Keyboard interactions”
Key Behavior
Tab Moves focus to the trigger, opening the tooltip instantly.
Space If open, closes the tooltip without activating a hover delay.
Enter If open, closes the tooltip without activating a hover delay.
Escape Closes the tooltip.

ARIA mechanism

Section titled “ARIA mechanism”

The Popup renders role="tooltip"; the Trigger wires aria-describedby pointing at the Popup’s id while open. This implements the WAI-ARIA APG tooltip pattern and is covered by the Playwright browser test suite and gated by axe-core in CI.