Tooltip

A compound tooltip component using Tooltip.Trigger and Tooltip.Content to display contextual information on hover.

Basic

Tooltips are essential for icon-only buttons to communicate their purpose.

A formatting toolbar with tooltips showing keyboard shortcuts.

Show user details on hover over avatars.

Wrap a disabled button in a <span> so the tooltip trigger can still receive hover events.

Override the tooltip appearance with --mantle-tooltip-bg, --mantle-tooltip-text, and --mantle-tooltip-border on Tooltip.Content.

Prop	Type	Default	Description
`delayMs`	`number`	`300`	Delay in milliseconds before the tooltip appears on hover.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

delayMs300

number

Delay in milliseconds before the tooltip appears on hover.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	The preferred side of the trigger to render the tooltip.
`--mantle-tooltip-bg`	`CSS variable`	`theme muted bg`	Override the tooltip background. e.g. style={{ "--mantle-tooltip-bg": "#3b82f6" }}
`--mantle-tooltip-text`	`CSS variable`	`theme text`	Override the tooltip text color. e.g. style={{ "--mantle-tooltip-text": "#ffffff" }}
`--mantle-tooltip-border`	`CSS variable`	`theme border`	Override the tooltip border color. Set to "transparent" to remove. e.g. style={{ "--mantle-tooltip-border": "transparent" }}

side"top"

"top" | "bottom" | "left" | "right"

The preferred side of the trigger to render the tooltip.

--mantle-tooltip-bgtheme muted bg

CSS variable

Override the tooltip background. e.g. style={{ "--mantle-tooltip-bg": "#3b82f6" }}

--mantle-tooltip-texttheme text

CSS variable

Override the tooltip text color. e.g. style={{ "--mantle-tooltip-text": "#ffffff" }}

--mantle-tooltip-bordertheme border

CSS variable

Override the tooltip border color. Set to "transparent" to remove. e.g. style={{ "--mantle-tooltip-border": "transparent" }}