Popovers

Attach richer floating content to interactive trigger elements with placement, triggers, and delay settings.

Overview

Popovers are captured inside the trigger element. Bootstrap initializes them from generated data-bs-* attributes, and the plugin depends on Popper for positioning.

Initialize popovers from JavaScript once the page is ready: document.querySelectorAll('[data-bs-toggle="popover"]').forEach(element => bootstrap.Popover.getOrCreateInstance(element));

Popovers are opt-in for performance, are hidden from assistive technology until shown, and should be attached to focusable interactive triggers. Keep body content concise because keyboard users must be able to reach and dismiss the trigger predictably.

Enable popovers

Add a captured bs-popover inside the trigger helper. The trigger remains the interactive element; the captured popover supplies title, content, placement, and plugin options.

aspnet


<bs-button btn-style="Secondary">
    Click to toggle popover
    <bs-popover title="Popover title">And here is some useful content.</bs-popover>
</bs-button>

Live demo

After initialization, clicking the trigger toggles the popover just like Bootstrap's standard live example.

aspnet


<bs-button btn-style="Danger">
    Live popover
    <bs-popover title="Live demo">This mirrors Bootstrap's primary live popover example.</bs-popover>
</bs-button>

Four directions

Use top, bottom, left, and right placements. These examples avoid start/end aliases so the placement maps directly to Bootstrap's documented directions.

aspnet


<bs-div display="Flex" flex-wrap="Wrap" gap="Default2">
    <bs-button btn-style="Secondary">Top<bs-popover title="Top" placement="Top">Popover body</bs-popover></bs-button>
    <bs-button btn-style="Secondary">Bottom<bs-popover title="Bottom" placement="Bottom">Popover body</bs-popover></bs-button>
    <bs-button btn-style="Secondary">Left<bs-popover title="Left" placement="Left">Popover body</bs-popover></bs-button>
    <bs-button btn-style="Secondary">Right<bs-popover title="Right" placement="Right">Popover body</bs-popover></bs-button>
</bs-div>

Custom container

Set container for positioning in complex layouts.

aspnet


<bs-button btn-style="Secondary">
    Body container
    <bs-popover title="Container" placement="Right" container="body">The popover is appended to the body.</bs-popover>
</bs-button>

Custom popovers

Set custom-class when site CSS supplies a themed popover class.

aspnet


<bs-button btn-style="Secondary">
    Custom class
    <bs-popover title="Custom popover" placement="Right" custom-class="custom-popover">Use CSS variables in the custom class to theme this popover.</bs-popover>
</bs-button>
<bs-button btn-style="Secondary">
    Fuchsia title
    <bs-popover title="Fuchsia title" placement="Right" style="--bs-popover-header-bg: #c2187a; --bs-popover-header-color: #fff;">The header uses captured CSS variables for a fuchsia title.</bs-popover>
</bs-button>

Dismiss on next click

Use a focus trigger on an anchor with tabindex="0" for the cross-browser dismissible pattern Bootstrap documents.

Dismissible popover

aspnet


<bs-button btn-style="Danger" href="#" role="button" tabindex="0">
    Dismissible popover
    <bs-popover title="Dismissible" trigger="Focus">Dismisses on next focus target.</bs-popover>
</bs-button>

Delayed popovers

Use show and hide delays when immediate display or dismissal would feel abrupt for hover or focus-driven triggers.

aspnet


<bs-button btn-style="Primary" outline="true">
    Delayed
    <bs-popover title="Delay" delay-show="300" delay-hide="100">Uses show and hide delay values.</bs-popover>
</bs-button>

Disabled elements

Attach the popover to a focusable wrapper when the visible control is disabled.

aspnet


<bs-div tabindex="0" display="InlineBlock">
    <bs-popover title="Disabled control" trigger="@(BootstrapTrigger.Hover | BootstrapTrigger.Focus)">The wrapper receives focus or hover and toggles the popover.</bs-popover>
    <bs-button btn-style="Primary" disabled="true" pointer-events="None">Disabled button</bs-button>
</bs-div>

CSS

Variables

Popovers use Bootstrap local CSS variables for dimensions, color, border, radius, shadow, header, body, and arrow styling. Use custom-class when a page needs a scoped popover theme.

Sass variables

Popover Sass variables remain stylesheet concerns; BCL helpers emit the documented trigger attributes and let the approved Bootstrap stylesheet own the rendered surface.

Usage

The tag helper writes Bootstrap popover data attributes onto the trigger. Use placement, container, trigger, delay-show, delay-hide, and custom-class for the common documented options.

Options

Use bootstrap.Popover.getOrCreateInstance(element) when initializing dynamically added triggers.
Call show(), hide(), toggle(), or dispose() on the returned instance for imperative behavior.
Bootstrap raises show.bs.popover, shown.bs.popover, hide.bs.popover, hidden.bs.popover, and inserted.bs.popover.

Methods

javascript


const trigger = document.querySelector('[data-bs-toggle="popover"]');
const popover = bootstrap.Popover.getOrCreateInstance(trigger);
popover.show();
popover.hide();
popover.dispose();

Events

Popover lifecycle events remain Bootstrap events, but the captured popover helper can bind them declaratively on the trigger it configures.

aspnet


<bs-button btn-style="Secondary">
    Event popover
    <bs-popover title="Events" on-shown="console.log('popover shown', event.target)" on-hidden="console.log('popover hidden', event.target)" on-inserted="console.log('popover inserted', event.target)">Show and hide this popover to inspect lifecycle events.</bs-popover>
</bs-button>