Popover Benchmark

Bootstrap 5 Popover JS (extends Tooltip + Popper.js) vs Native Popover API + CSS Anchor Positioning

Methodology: Both sections contain 100 popover trigger buttons. The benchmark creates Bootstrap Popover instances (init cost), then shows and hides all 100 popovers for 10 cycles (1,000 show + 1,000 hide operations per section). CSS transitions are disabled during the run so we measure raw JS overhead, not animation time.

Popover API CSS Anchor Positioning

Bootstrap JS

Uses bootstrap.Popover (extends Tooltip) + Popper.js — creates DOM template, sanitizes HTML via TemplateFactory + Sanitizer, runs createPopper() for positioning on every show.

Native Browser API

Uses Popover API (popover="auto") + CSS Anchor Positioning — browser handles toggle, light-dismiss, top-layer stacking, and positioning. Zero JavaScript.

Results

Metric	Bootstrap Popover	Native Popover API
Initialization time (100 instances)	-	-
Toggle time (10 cycles × 100 items)	-	-
Instance memory cost (100 instances)	-	-
JS code size popover.js (2.6 KB) + tooltip.js (18.0 KB) + template-factory.js (4.6 KB) + sanitizer.js (3.8 KB) + @popperjs/core (19.7 KB min)	-	-
CSS output size _popover.scss (6.7 KB)	-	-

Bootstrap JS 100 items — `data-bs-toggle="popover"`

Native Browser API 100 items — `popover="auto"` + CSS Anchor

About popover creation: Bootstrap Popover extends Tooltip and calls Popper.js’s createPopper() on every show, creates a new popover <div> via TemplateFactory, sanitizes its HTML content via Sanitizer, and runs JavaScript to calculate offsets and apply inline transform styles. Native Popover API elements are already in the DOM — the popover="auto" attribute provides click-to-toggle and light-dismiss for free. CSS Anchor Positioning handles placement — zero JavaScript required.

Native popover — entire implementation

HTML (fully declarative — no JS)

<!-- Trigger button -->
<button style="anchor-name: --my-pop-trigger;"
        popovertarget="my-popover">
  Toggle popover
</button>

<!-- Popover (Bootstrap utility classes for styling) -->
<div popover="auto" id="my-popover"
     class="p-0 border rounded shadow bg-white"
     style="position-anchor: --my-pop-trigger;">
  <div class="px-3 py-2 bg-body-secondary border-bottom fw-semibold small">Title</div>
  <div class="px-3 py-2 small">Popover content here.</div>
</div>

CSS (only anchor positioning — no styling needed)

[popover] {
  inset: auto;                        /* reset UA default */
  position-area: bottom span-right;   /* place below trigger */
}