Tooltip

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

Basic Usage

Example

Positions

Tooltip supports 12 positions using the side and align props on BrTooltipContent.

Example

Advanced Usage

Features like manual control, custom delay, and rich content.

Manual Control (Click)

No Delay + Icon

Example

Theming

Customize the tooltip appearance globally using BrConfigProvider or locally using Tailwind CSS classes.

Global Customization

You can configure popover, popoverForeground, radius, shadow, and zTooltip in BrConfigProvider to affect all tooltips.

Config Provider Theme

Tailwind Override

Example

API

BrTooltip

The root component that manages the tooltip state.

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	undefined	The controlled open state of the tooltip.
delayDuration	number	300	The duration from when the mouse enters a trigger until the tooltip opens.
disableHoverableContent	boolean	false	When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.

BrTooltipTrigger

The button that triggers the tooltip.

Prop	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

BrTooltipContent

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.
sideOffset	number	4	The distance in pixels from the trigger.
align	'start' | 'center' | 'end'	'center'	The preferred alignment against the trigger.
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.