Components / Overlays
Tooltip
Concise supplemental text shown from pointer hover or keyboard focus after a configurable delay.
Available in @kape/react
Interactive example
Use keyboard and pointer input to exercise the public behavior.
Installation and usage
Import the owned Kape primitives and the component stylesheet once.
Tooltip imports
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@kape/react";
import "@kape/react/styles.css";Props
| Prop | Type | Purpose |
|---|---|---|
delayDuration | number | Provider opening delay |
open / defaultOpen | boolean | Controlled or initial state |
side | top | right | bottom | left | Preferred position |
Accessibility
Semantics, focus, naming, disabled states, and announcements are preserved by the Kape wrapper and covered by component tests. Supply meaningful visible labels and descriptions.
Keyboard
- Tab
- Focusing the trigger opens the tooltip.
- Escape
- Dismisses the tooltip.
- Pointer hover
- Opens after the provider delay.
Composition and limitations
Compose the exported parts directly; styling implementation details and the underlying headless library are not public API.