tooltip

Installation

Import TooltipProvider, Tooltip, TooltipTrigger and TooltipContent from `@/components/kamod-ui/tooltip`.

pnpm add @kamod-ch/ui

Keep tooltip copy short, support keyboard focus, and never hide critical actions behind only tooltip text.

import { Tooltip } from "@/components/kamod-ui/tooltip";

<Tooltip />

Standard hover and focus tooltip.

Choose top, right, bottom, or left placement.

Fine-tune edge alignment and nudge the position.

Set shared open/close timing once for a whole area.

Close immediately when leaving trigger, even if pointer enters content.

Provide compact command hints in the tooltip body.

Wrap disabled controls so tooltip still gets hover and focus events.

Props, slots and variants for this component.

Tooltip component props and accepted values.

Prop	Type	Default
defaultOpen	`boolean`	`false`
open	`boolean`	`uncontrolled`
onOpenChange	`(next: boolean) => void`	`undefined`
delayDuration	`number`	`250`
closeDelayDuration	`number`	`120`
disableHoverableContent	`boolean`	`false`
TooltipProvider delayDuration	`number`	`250`
TooltipProvider closeDelayDuration	`number`	`120`
TooltipProvider disableHoverableContent	`boolean`	`false`
TooltipTrigger asChild	`boolean`	`false`
TooltipContent asChild	`boolean`	`false`
TooltipContent side	`"top" \| "right" \| "bottom" \| "left"`	`"top"`
TooltipContent align	`"start" \| "center" \| "end"`	`"center"`
TooltipContent alignOffset	`number`	`0`
TooltipContent collisionPadding	`number`	`8`
TooltipContent forceMount	`boolean`	`false`
TooltipTrigger	`focus/hover target`	`required`

Tooltips are supplemental only: keep essential instructions visible in the UI and expose help text via focus for keyboard users.