Tooltip

Use bo-tooltip for brief, non-interactive context attached to a control.

Usage

<bo-tooltip content="More information">
  <bo-button>Hover or focus</bo-button>
</bo-tooltip>

Placement

Use one of the side and alignment placements. The default placement is top.

<bo-tooltip content="Shown above" placement="top" :arrow="false">
  <bo-button>Top tooltip</bo-button>
</bo-tooltip>

Triggers and delays

The default trigger is hover. Use focus, click, or manual with visible. show-delay and hide-delay are measured in milliseconds.

<bo-tooltip content="Click for details" trigger="click">
  <bo-button>Click</bo-button>
</bo-tooltip>

API

Prop / event / slot	Type	Default	Description
id / dataTestId	string	autogenerated	Tooltip attributes.
content	string	-	Plain tooltip content.
placement	BoTooltipPlacement	top	Position beside the trigger.
trigger	hover | focus | click | manual	hover	Visibility trigger.
visible	boolean	false	Visibility for a manual trigger.
disabled	boolean	false	Prevents showing the tooltip.
showDelay / hideDelay	number	100	Show and hide delays in milliseconds.
offset	number	8	Gap from the trigger.
arrow	boolean	true	Shows the pointing arrow.
role	HTMLAttributes['role']	tooltip	Tooltip semantics.
show / hide	event	-	Emitted when visibility changes.
default	slot	-	Interactive trigger content.
content	slot	-	Rich content beside the string prop.