ReferenceComponentsDialogs, toasts, and overlays
Tooltip
Tooltip component API, behavior, and executable example.
Loading executable example…
API and events
Layer focus-trapped dialogs, contextual help, transient notices, and searchable command execution over an application.
export function Tooltip({
targetId,
content,
description,
delay = 400,
open,
defaultOpen = false,
onOpenChange,
children,
}: TooltipProps): ReactNode;Props, functions, and events
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
targetId | string | Yes | The targetId member uses the string contract. | — |
content | ReactNode | Yes | The content member uses the ReactNode contract. | — |
description | string | undefined | No | The description member uses the string | undefined contract. | — |
delay | number | undefined | No | The delay member uses the number | undefined contract. | — |
open | boolean | undefined | No | The open member uses the boolean | undefined contract. | — |
defaultOpen | boolean | undefined | No | The defaultOpen member uses the boolean | undefined contract. | — |
onOpenChange | ((open: boolean) => void | Promise<void>) | undefined | No | The onOpenChange member uses the ((open: boolean) => void | Promise<void>) | undefined contract. | — |
children | ReactNode | No | The children member uses the ReactNode contract. | — |
Open state and selections flow through onOpenChange, onPress, command callbacks, and the toast API.
Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.
Interaction and capabilities
The top overlay receives input before application hotkeys. Escape closes dismissible overlays and focus returns to the prior node.
The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.
Complete import
import { Tooltip } from "@/components/tuil/feedback/overlays";