Tooltip

<NaviusTooltipProvider DelayDuration="300">
    <NaviusTooltip>
        <NaviusTooltipTrigger aria-label="Add to library"
            class="... hover:bg-accent data-[open]:bg-accent">
            <PlusIcon />
        </NaviusTooltipTrigger>

        <NaviusTooltipPositioner Side="top" SideOffset="6">
            <NaviusTooltipPopup
                class="... bg-popover text-popover-foreground shadow-md">
                Add to library
                <NaviusTooltipArrow class="fill-popover" />
            </NaviusTooltipPopup>
        </NaviusTooltipPositioner>
    </NaviusTooltip>
</NaviusTooltipProvider>

Features

• Opens on hover after a configurable delay, and instantly on keyboard focus.
• The provider's skip-delay window opens the next tooltip instantly (data-instant).
• Can be controlled (@bind-Open) or uncontrolled (DefaultOpen).
• Content self-portals to document.body, escaping overflow and stacking clip.
• Collision-aware positioning with optional arrow, exposed via data-side / data-align.
• Hoverable content by default; dismisses on Escape, blur, press, or outside pointer-down.

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add tooltip

Anatomy

Import the parts and assemble them. Wrap your app once in a provider to share delay defaults.

@using Navius.Primitives.Components.Tooltip

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

API Reference

Provider

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

Root

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

Trigger

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

Data attributes

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 Positioner.

Data attributes

Arrow

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

Data attributes

Accessibility

Adheres to the tooltip WAI-ARIA design pattern. The trigger points at the content with aria-describedby while open.

Keyboard interactions