Tooltip

Hover/focus hint bubble, wrapping Radix Tooltip.

Tooltip wraps @radix-ui/react-tooltip: bg-popover + surface content, Radix's default show delay, dismiss on Escape. Place TooltipProvider once near the root (or around a subtree) and use any number of tooltips below it.

Installation

import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@iammikz/srui";

Usage

Props

Export	Notes
`TooltipProvider`	Required ancestor; `delayDuration` etc.
`Tooltip`	Root; `open`/`onOpenChange` for controlled use. Opens instantly by default (`delayDuration={0}`) — pass `delayDuration` to reintroduce a hover delay
`TooltipTrigger`	The hover/focus target (`asChild` supported)
`TooltipContent`	The bubble; adds `sideOffset?: number` (default `6`) plus Radix Content props (`side`, `align`, …)

Examples

All sides

Accessibility

Tooltips appear on keyboard focus as well as hover and dismiss on Escape (Radix behavior). Tooltips are supplements — never put information in a tooltip that isn't available elsewhere, since touch users can't hover.