Tooltip

Tooltips positioned with Floating UI, shown on hover and keyboard focus and dismissed with Escape.

Bootstrap’s tooltip docs describe the markup and CSS.

Example

Pass the text to bsTooltip and choose a placement. The trigger gets aria-describedby while the tooltip is shown.

HTML

<div class="d-flex flex-wrap gap-2">
  <button type="button" bsButton theme="secondary" bsTooltip="Tooltip on top">Top</button>
  <button type="button" bsButton theme="secondary" bsTooltip="Tooltip on end" placement="end">
    End
  </button>
  <button type="button" bsButton theme="secondary" bsTooltip="Tooltip on bottom" placement="bottom">
    Bottom
  </button>
  <button type="button" bsButton theme="secondary" bsTooltip="Tooltip on start" placement="start">
    Start
  </button>
</div>

Rich content

Pass an ng-template instead of text for formatted content. Text is always rendered as text, never as HTML.

HTML

<button type="button" bsButton theme="primary" [bsTooltip]="rich">Tooltip with HTML</button>

<ng-template #rich><em>Tooltip</em> <u>with</u> <b>HTML</b></ng-template>

Triggers and delay

Use trigger for click or manual control, and delay to wait before showing and hiding.

HTML

<div class="d-flex flex-wrap gap-2">
  <button type="button" bsButton theme="secondary" bsTooltip="Shown after 500ms" [delay]="500">
    Delayed
  </button>
  <button type="button" bsButton theme="secondary" bsTooltip="Toggled by click" trigger="click">
    Click me
  </button>
  <button
    type="button"
    bsButton
    theme="secondary"
    #tip="bsTooltip"
    bsTooltip="Opened with show()"
    trigger="manual"
    (click)="tip.toggle()">
    Manual
  </button>
</div>

API

BsTooltip

Selector: [bsTooltip] · Exported as: bsTooltip

Inputs

Name	Type	Default	Description
`bsTooltip`	`string \| TemplateRef`	`undefined`	Content of the tooltip. Nothing shows when empty.
`placement`	`BsPlacement`	`'top'`	Where the tip appears. start and end follow the text direction. Flips when there is no room.
`trigger`	`string`	`'hover focus'`	Space-separated hover, focus, click, or manual.
`delay`	`number`	`0`	Milliseconds before showing and hiding.
`animation`	`boolean`	`true`	Fades the tip in and out.

Outputs

Name	Type	Description
`shown`	`void`	Emits after the tip is shown.
`hidden`	`void`	Emits after the tip is hidden and removed.

Methods

Name	Type	Description
`show()`	`Promise<void>`	Shows the tip.
`hide()`	`Promise<void>`	Hides the tip.
`toggle()`	`Promise<void>`	Toggles the tip.
`isOpen`	`Signal<boolean>`	Whether the tip is shown.