Tooltip, Asgard Docs

Feedback & overlays

Explain on hover or focus.

A lightweight tooltip that displays contextual information on hover or focus.

Key features:

Four positions: top, bottom, left, right
Configurable delay timing (default 500ms)
Supports any ReactNode as content
Portal rendering to avoid overflow clipping

Loading preview…

When to use it

Labels for icon-only buttons
Definitions and shortcuts
Full text for truncated labels
Tuning hover delay for dense toolbars

Properties

Prop	Type	Default	Description
`content`	`ReactNode`	—	The content to display inside the tooltip. Can be a string or any React node.
`children`	`ReactElement`	—	A single child element that the tooltip wraps. The tooltip is triggered by hover and focus events on this element.
`delay`	`number`	`500`	Delay in milliseconds before the tooltip appears after the trigger event.
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	The preferred position of the tooltip relative to the child element.
`disabled`	`boolean`	`false`	When true, the tooltip will not appear on hover or focus.

Notes

Wraps a single child element. If you need to tooltip a component that does not forward refs, wrap it in a <span> or <div>.
Uses portal rendering to avoid clipping by parent containers with overflow: hidden.

Presets