overlay

Tooltip

A hover and focus label with a shared open delay, so moving between triggers stays instant.

Hover the first, then move along the row: the delay is spent once. That shared timer lives in the provider, which is why one wraps the app.

Own the source

Noksha ships as a package and as copy-paste source. Take the files and they are yours to change. These are read from the generated registry, so they are exactly what the library ships — never a paraphrase of it.

Take these files, and internal helpers along with them — the imports below point at them. Or let the CLI do it: npx @noksha-ui/cli add tooltip writes them, follows the same dependency graph, and fixes up the imports.

export {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipRoot,
  TooltipTrigger,
  tooltipContentVariants,
} from './tooltip.js';
export type {
  TooltipContentProps,
  TooltipProps,
  TooltipProviderProps,
  TooltipTriggerProps,
} from './tooltip.types.js';

API reference

TooltipProviderProps

Prop	Type	Description
delayDuration	number	How long the pointer must rest before the first tooltip opens.
skipDelayDuration	number	Window after one tooltip closes in which the next opens instantly. Scanning a toolbar should not mean waiting out the delay at every button; once the user has shown they are reading tooltips, the rest come at once.
children	React.ReactNode	—

TooltipProps

Prop	Type	Description
open	boolean	—
defaultOpen	boolean	—
onOpenChange	(open: boolean) => void	—
delayDuration	number	—
closeDelay	number	Grace period on leaving, so a wobbling pointer does not flicker it.
interactive	boolean	Keep it open while the pointer is over the tooltip itself.
children	React.ReactNode	—

TooltipTriggerProps

Also accepts everything from React.ButtonHTMLAttributes<HTMLButtonElement>.

Prop	Type	Description
asChild	boolean	—

TooltipContentProps

Also accepts everything from React.HTMLAttributes<HTMLDivElement>.

Prop	Type	Description
side	Side	—
align	Align	—
sideOffset	number	—
collisionPadding	number	—
arrow	boolean	—
container	Element \| null	—

Examples