Popover

<button class="b-btn" data-b-toggle="popover" data-b-target="#demo-popover">Show details</button>
<div id="demo-popover" class="b-popover">
  <strong>What is this?</strong>
  <p class="text-muted text-sm">A popover is a non-modal panel that doesn't dim the background.</p>
</div>

<button class="b-btn" data-b-toggle="popover" data-b-target="#info">Open</button>

<div id="info" class="b-popover">
  <strong>Title</strong>
  <p>Body text.</p>
</div>

Native popover attribute

For top-layer rendering and automatic light dismiss, opt into the native API:

<button class="b-btn" data-b-toggle="popover" data-b-target="#native-pop">Open</button>

<div id="native-pop" class="b-popover" popover>
  <strong>Native popover</strong>
  <p>Renders in the top layer, auto-dismisses on outside click and Escape.</p>
</div>

When popover is present, the framework uses showPopover() / hidePopover() and the browser handles light dismiss for you.

Anchor positioning

Where the browser supports CSS anchor positioning (position-area, Chrome 129+), popovers anchor to their trigger via position-anchor and the browser handles collisions through position-try-fallbacks — the panel flips above the trigger, or to the other inline side, rather than rendering off-screen.

Everywhere else the framework positions the panel itself and applies the same rules: it flips above the trigger when there is not enough room below, clamps into the viewport on the inline axis, and recomputes on scroll and resize. The resolved side is exposed as data-b-placement="block-start" or "block-end" if you want to hook an arrow or transform onto it.

Popovers without the popover attribute always take the JS path, since they render in normal flow rather than the top layer.

API