Components

Tooltip

A short hint shown on hover or focus.

Usage

Basic

HTML

<bs:bsui-tooltip>
  <bs:bsui-tooltip-trigger trigger_label="Hover me" trigger_variant="outline" />
  <bs:bsui-tooltip-popup content="Shortcut: Cmd K" />
</bs:bsui-tooltip>

Open and close delays

Two triggers with different timings, one showing on the first hover frame and one lingering after the pointer leaves.

HTML

<bs:bsui-stack direction="row" gap="3" justify="center">
  <bs:bsui-tooltip openDelay="0">
    <bs:bsui-tooltip-trigger trigger_label="Instant" trigger_variant="secondary" />
    <bs:bsui-tooltip-popup content="Shows the hint on the first hover frame" />
  </bs:bsui-tooltip>
  <bs:bsui-tooltip openDelay="600" closeDelay="400">
    <bs:bsui-tooltip-trigger trigger_label="Patient" trigger_variant="secondary" />
    <bs:bsui-tooltip-popup content="Stays up as the pointer moves away" />
  </bs:bsui-tooltip>
</bs:bsui-stack>

Icon hint

A ghost icon trigger beside a field label, which is where most product tooltips actually live.

Retention window

HTML

<bs:bsui-stack direction="row" gap="2" align="center" justify="center">
  <bs:bsui-text content="Retention window" variant="label" tag="span" />
  <bs:bsui-tooltip openDelay="0">
    <bs:bsui-tooltip-trigger trigger_label="?" trigger_variant="ghost" trigger_size="icon-sm" />
    <bs:bsui-tooltip-popup content="Logs older than the window are deleted nightly" />
  </bs:bsui-tooltip>
</bs:bsui-stack>

Anatomy

Tooltip is composed of the blocks below. Each one is a separate block that only renders inside its parent.

bsui/tooltip
bsui/tooltip-popup
bsui/tooltip-trigger

Attributes

Attribute	Type	Default
`openDelay`	`number`	`600`
`closeDelay`	`number`	`0`

`bsui/tooltip-popup`

Attribute	Type	Default
`content`	`richtext`	—

`bsui/tooltip-trigger`

Attribute	Type	Default
`trigger`	`text`	—
`trigger_block`	`text`	`bsui/button`
`trigger_label`	`richtext`	—
`trigger_icon`	`icon`	—
`trigger_iconPosition`	`left` `right`	`left`
`trigger_href`	`text`	—
`trigger_variant`	`default` `secondary` `outline` `ghost` `link` `destructive`	`default`
`trigger_size`	`default` `sm` `lg` `icon` `icon-sm`	`default`
`trigger_disabled`	`toggle`	`false`