Tooltip

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

Note: Wrap your app with `TooltipProvider` once at the root to enable tooltips throughout your application.

import { Button } from "@ngrok/mantle/button";
import { Tooltip } from "@ngrok/mantle/tooltip";

<Tooltip.Root>
	<Tooltip.Trigger asChild>
		<Button type="button" appearance="filled" priority="default">
			Hover me
		</Button>
	</Tooltip.Trigger>
	<Tooltip.Content>
		<p>This feature is part of your plan</p>
	</Tooltip.Content>
</Tooltip.Root>;

API Reference

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.

Note: Wrap your app with TooltipProvider once at the root to enable tooltips throughout your application.

API Reference

TooltipProvider

Tooltip.Root

Tooltip.Trigger

Tooltip.Content

Tooltip

Note: Wrap your app with TooltipProvider once at the root to enable tooltips throughout your application.

API Reference

TooltipProvider

Tooltip.Root

Tooltip.Trigger

Tooltip.Content

Note: Wrap your app with `TooltipProvider` once at the root to enable tooltips throughout your application.

Note: Wrap your app with `TooltipProvider` once at the root to enable tooltips throughout your application.