@ngrok/mantle

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

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.

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.

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.

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.