Tooltip - @ngrok/mantle

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

When to use

A Tooltip shows a short, non-interactive label when a control receives keyboard focus or a pointer hover. Reach for it to clarify the purpose of an icon-only button or provide a brief hint about a control.

Prefer Popover when the floating content needs buttons, links, inputs, or anything else focusable.
Prefer HoverCard for a sighted-only preview of content that already lives behind a link.

warning

Per the WAI-ARIA tooltip pattern, tooltips must not contain interactive or focusable content — the tooltip itself never receives focus, so anything inside it is unreachable for keyboard users. If the floating content needs to be interactive, use Popover instead.

1import { Button } from "@ngrok/mantle/button";2import { Tooltip } from "@ngrok/mantle/tooltip";3 4<Tooltip.Root>5	<Tooltip.Trigger asChild>6		<Button type="button" appearance="filled" priority="default">7			Hover me8		</Button>9	</Tooltip.Trigger>10	<Tooltip.Content>11		<p>This feature is part of your plan</p>12	</Tooltip.Content>13</Tooltip.Root>;

Composition

Compose the parts of a Tooltip together to build your own:

Tooltip.Root├── Tooltip.Trigger└── Tooltip.Content

API Reference

note

Wrap your app with TooltipProvider once at the root to share global tooltip behavior — such as consistent delay and hover settings — across your application.

TooltipProvider

Wraps your app to provide global functionality to your tooltips. Only one instance of this component should be rendered in your app, preferably at the root.

Prop	Type	Default	Description
`delayDuration?`	`number`	`0`	The duration from when the mouse enters a tooltip trigger until the tooltip opens, in milliseconds.
`skipDelayDuration?`	`number`	`300`	How much time a user has to enter another trigger without incurring a delay again, in milliseconds.
`disableHoverableContent?`	`boolean`	`false`	Prevents `Tooltip.Content` from remaining open when hovering. Disabling this has accessibility consequences.

Tooltip.Root

The root component that manages the open/closed state of the tooltip. Will throw if you have not wrapped your app in a TooltipProvider.

Prop	Type	Default	Description
`defaultOpen?`	`boolean`	`false`	The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
`open?`	`boolean`		The controlled open state of the tooltip. Must be used in conjunction with `onOpenChange`.
`onOpenChange?`	`(open: boolean) => void`		Event handler called when the open state of the tooltip changes.
`delayDuration?`	`number`		Override the duration given to the `TooltipProvider` to customize the open delay for a specific tooltip.
`disableHoverableContent?`	`boolean`		Override the `disableHoverableContent` given to the `TooltipProvider` to customize the behavior for a specific tooltip.

Tooltip.Trigger

The button that toggles the tooltip. By default, the Tooltip.Content will position itself against the trigger.

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Use the `asChild` prop to compose the tooltip trigger onto an alternative element.

Tooltip.Content

The component that pops out when the tooltip is open.

Prop	Type	Default	Description
`side?`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoidCollisions` is enabled.
`sideOffset?`	`number`	`4`	The distance in pixels from the trigger.
`align?`	`"start" \| "center" \| "end"`	`"center"`	The preferred alignment against the trigger. May change when collisions occur.
`alignOffset?`	`number`	`0`	An offset in pixels from the `start` or `end` alignment options.
`avoidCollisions?`	`boolean`	`true`	When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges.