Popover

Popovers with an optional header, opened by clicking their trigger and positioned with Floating UI.

Bootstrap’s popover docs describe the markup and CSS.

Example

Pass the body to bsPopover and the header to popoverTitle. Click the trigger again or press Escape to close it.

HTML

<button
  type="button"
  bsButton
  theme="danger"
  popoverTitle="Popover title"
  bsPopover="And here’s some amazing content. It’s very engaging. Right?">
  Click to toggle popover
</button>

Placement

Set placement to top, end, bottom or start. Popovers flip when there is no room.

<div class="d-flex flex-wrap gap-2">
  @for (placement of placements; track placement) {
    <button
      type="button"
      bsButton
      theme="secondary"
      [placement]="placement"
      [bsPopover]="`Popover on ${placement}`">
      Popover on {{ placement }}
    </button>
  }
</div>

Templates and triggers

Pass ng-template references for rich content, and set trigger="hover focus" to open on hover and focus instead of click. Tab from the trigger moves into a popover with links or buttons, and Tab from its last control continues after the trigger. With trigger="focus", the popover closes on the next click elsewhere, but clicks inside it don’t close it, so users can select its text or use its controls.

<button
  type="button"
  bsButton
  theme="primary"
  [popoverTitle]="title"
  [bsPopover]="body"
  trigger="hover focus">
  Hover or focus me
</button>

<ng-template #title>Profile <span class="badge theme-success">new</span></ng-template>
<ng-template #body>
  Popover content can be any <strong>template</strong>, with bindings: {{ count() }} views.
</ng-template>

API

BsPopover

Selector: [bsPopover] · Exported as: bsPopover

Inputs

Name	Type	Default	Description
`bsPopover`	`string \| TemplateRef`	`undefined`	Content of the popover body.
`popoverTitle`	`string \| TemplateRef`	`undefined`	Content of the header. Left out when empty.
`placement`	`BsPlacement`	`'top'`	Where the tip appears. start and end follow the text direction. Flips when there is no room.
`trigger`	`string`	`'click'`	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.