@gridui/tooltip

Core family. Public API: Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps.

Import components from @gridui/tooltip and load @gridui/tooltip/styles.css after Theme. Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.

See component ownership and release history.

Tooltips

The Tooltip family owns composable primitives for supplemental button and link hints. This family owns timing, controlled state, native trigger composition, portal styling, positioning, accessibility, and content limits. Applications own clipboard state and localized labels.

Implementation and lifecycle

Use TooltipProvider around a related action group, then compose Tooltip, TooltipTrigger, and TooltipContent. The provider defaults to a 300ms hover delay; keyboard focus opens immediately. Native Radix provider/root props expose shared timing and controlled or uncontrolled state. TooltipTrigger defaults to asChild, preserving a single native button or link, its ref, and event handlers. Keep the trigger's accessible name even when a tooltip repeats it.

TooltipContent forwards native content props and refs, defaults to an 8px side offset and 16px collision padding, and portals into document.body. The portal avoids clipping and uses the document theme's semantic palette. Use container when a different portal host is required, and className, style, side, or align for local presentation. Entry/exit motion respects reduced motion. With forceMount, Overlay retains the content through React Activity while closed content stays hidden, its refs are detached, and its effects are suspended. This lifecycle does not rely on exit animation, including under reduced motion. Radix owns description association, hoverable content, Escape dismissal, and viewport collisions. Content is supplemental, noninteractive text; use a popover for interactive content. Disabled native controls do not receive focus; essential instructions must also be available outside the tooltip. Consumers own copy, localization, and business state.

<TooltipProvider>
    <Tooltip>
        <TooltipTrigger>
            <Button aria-label="Copy prompt">Copy</Button>
        </TooltipTrigger>
        <TooltipContent>Copy prompt</TooltipContent>
    </Tooltip>
</TooltipProvider>

Surface motion uses @gridui/overlay; load @gridui/overlay/styles.css after Theme and before this family.