Popovers

Overview

Things to know when using the popover plugin:

• Popovers rely on the third party library Popper for positioning.
• Popovers require the popover plugin as a dependency.
• Popovers are opt-in for performance reasons, so you must initialize them yourself.
• Zero-length title and content values will never show a popover.
• Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc).
• Triggering popovers on hidden elements will not work.
• Popovers for .disabled or disabled elements must be triggered on a wrapper element.
• When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors’ overall width. Use .text-nowrap on your <a>s to avoid this behavior.
• Popovers must be hidden before their corresponding elements have been removed from the DOM.
• Popovers can be triggered thanks to an element inside a shadow DOM.

Keep reading to see how popovers work with some examples.

Examples

Enable popovers

As mentioned above, you must initialize popovers before they can be used. One way to initialize all popovers on a page would be to select them by their data-bs-toggle attribute, like so:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(async popoverTriggerEl => await openFrontend.Popover.then(component => new component(popoverTriggerEl)))

Live demo

We use JavaScript similar to the snippet above to render the following live popover. Titles are set via data-bs-title and body content is set via data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Four directions

Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set data-bs-placement to change the direction.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Custom container

When you have some styles on a parent element that interfere with a popover, you’ll want to specify a custom container so that the popover’s HTML appears within that element instead. This is common in responsive tables, input groups, and the like.

const popover = await openFrontend.Popover.then(component => component.getOrCreateInstance('.example-popover', {
  container: 'body'
}))

Another situation where you’ll want to set an explicit custom container are popovers inside a modal dialog, to make sure that the popover itself is appended to the modal. This is particularly important for popovers that contain interactive elements – modal dialogs will trap focus, so unless the popover is a child element of the modal, users won’t be able to focus or activate these interactive elements.

const popover = await openFrontend.Popover.then(component => component.getOrCreateInstance('.example-popover', {
  container: '.modal-body'
}))

Custom popovers

You can customize the appearance of popovers using CSS variables. We set a custom class with data-bs-custom-class="custom-popover" to scope our custom appearance and use it to override some of the local CSS variables.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bd-ofi-color-bg);
  --bs-popover-header-bg: var(--bd-ofi-color-bg);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

Dismiss on next click

Use the focus trigger to dismiss popovers on the user’s next click of an element other than the toggle element.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = await openFrontend.Popover.then(component => component.getOrCreateInstance('.popover-dismiss', {
  trigger: 'focus'
}))

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0".

For disabled popover triggers, you may also prefer data-bs-trigger="hover focus" so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Popover content

You can use the dedicated markup to display the popover content:

open

December 16 @ 12:00 - 13:30

Yoga at the Park

Join us Wednesday afternoons for yoga during your lunch break. Leave the building stress of work at the door and find the center of your breath as we practice vinyasa […]

Read more

<div class="popover-content">
  <div class="popover-content-media">
    <figure class="popover-content-image">
      <img src="assets/media/sample-image.jpg" alt="">
    </figure>
    <div class="popover-content-media__content popover-content-media__content--top-right">
      <div class="state state--open">
        open
      </div>
    </div>
  </div>
  <div class="popover-content-inside">
    <div class="popover-content-info">December 16 @ 12:00 - 13:30</div>
    <h6 class="popover-content-title">Yoga at the Park</h6>
    <p>Join us Wednesday afternoons for yoga during your lunch break. Leave the building stress of work at the door and find the center of your breath as we practice vinyasa […]</p>
    <a href="#" class="icon-link icon-link-hover stretched-link">
      <span class="icon-link-text">Read more</span>
      <svg class="of-icon" width="32" height="32" fill="currentColor">
      	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
      </svg>
      

    </a>
  </div>
</div>

Horizontal layout

For the content that requires a box wider than higher (like map pin tooltips), you can use the .popover-content-horizontal layout:

open

Event | Lyss, CH

21.11.2023 - 27.11.2023

Yoga at the Park

Join us Wednesday afternoons for yoga during your lunch […]

View details

<div class="popover-content popover-content-horizontal">
  <div class="popover-content-media">
    <figure class="popover-content-image">
      <img src="assets/media/sample-image.jpg" alt="">
    </figure>
    <div class="popover-content-media__content popover-content-media__content--top-right">
      <div class="state state--open">
        open
      </div>
    </div>
  </div>
  <div class="popover-content-inside">
    <div class="popover-content-info">Event | Lyss, CH</div>
    <div class="popover-content-info">21.11.2023 - 27.11.2023</div>
    <h6 class="popover-content-title">Yoga at the Park</h6>
    <p>Join us Wednesday afternoons for yoga during your lunch […]</p>
    <a href="#" class="icon-link icon-link-hover stretched-link">
      <span class="icon-link-text">View details</span>
      <svg class="of-icon" width="32" height="32" fill="currentColor">
      	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
      </svg>
      

    </a>
  </div>
</div>

CSS

Variables

As part of Bootstrap’s evolving CSS variables approach, popovers now use local CSS variables on .popover for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

--#{$prefix}popover-zindex: #{$zindex-popover};
--#{$prefix}popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --#{$prefix}popover-font-size);
--#{$prefix}popover-bg: #{$popover-bg};
--#{$prefix}popover-border-width: #{$popover-border-width};
--#{$prefix}popover-border-color: #{$popover-border-color};
--#{$prefix}popover-border-radius: #{$popover-border-radius};
--#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
--#{$prefix}popover-box-shadow: #{$popover-box-shadow};
--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
@include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
--#{$prefix}popover-header-color: #{$popover-header-color};
--#{$prefix}popover-header-bg: #{$popover-header-bg};
--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
--#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
--#{$prefix}popover-body-color: #{$popover-body-color};
--#{$prefix}popover-arrow-width: #{$popover-arrow-width};
--#{$prefix}popover-arrow-height: #{$popover-arrow-height};
--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);

The SCSS variables for .popover-content can be found here:

@include rfs($popover-content-font-size, --#{$prefix}popover-content-font-size);
--#{$prefix}popover-content-font-family: #{$popover-content-font-family};
--#{$prefix}popover-content-font-weight: #{$popover-content-font-weight};
--#{$prefix}popover-content-line-height: #{$popover-content-line-height};
--#{$prefix}popover-content-color: #{$popover-content-color};
--#{$prefix}popover-content-title-font-size: #{$popover-content-title-font-size};
--#{$prefix}popover-content-title-color: #{$popover-content-title-color};
--#{$prefix}popover-content-title-margin-bottom: #{$popover-content-title-margin-bottom};
--#{$prefix}popover-content-info-color: #{$popover-content-info-color};
--#{$prefix}popover-content-info-margin-bottom: #{$popover-content-info-margin-bottom};
--#{$prefix}popover-content-media-max-width: #{$popover-content-media-max-width};
--#{$prefix}popover-content-media-margin-bottom: #{$popover-content-media-margin-bottom};
--#{$prefix}popover-content-media-spacer-x: #{$popover-content-media-spacer-x};
--#{$prefix}popover-content-media-spacer-y: #{$popover-content-media-spacer-y};

Sass variables

$popover-font-size:                 $font-size-sm;
$popover-bg:                        var(--#{$prefix}body-bg);
$popover-max-width:                 276px;
$popover-border-width:              var(--#{$prefix}border-width);
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             var(--#{$prefix}border-radius-lg);
$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}); // stylelint-disable-line function-disallowed-list
$popover-box-shadow:                var(--#{$prefix}box-shadow);

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 var(--#{$prefix}secondary-bg);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                var(--#{$prefix}body-color);
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;

The SCSS variables for .popover-content can be found here:

$popover-content-font-size:                14px;
$popover-content-font-family:              var(--#{$prefix}body-font-family);
$popover-content-font-weight:              var(--#{$prefix}body-font-weight);
$popover-content-line-height:              var(--#{$prefix}body-line-height);
$popover-content-color:                    var(--#{$prefix}body-color);
$popover-content-title-font-size:          1.4em;
$popover-content-title-color:              null;
$popover-content-title-margin-bottom:      .5em;
$popover-content-info-color:               var(--#{$prefix}secondary-color);
$popover-content-info-margin-bottom:       .15em;
$popover-content-media-margin-bottom:      1rem;
$popover-content-media-max-width:          null;
$popover-content-media-spacer-x:           .5rem;
$popover-content-media-spacer-y:           .5rem;

Usage

Enable popovers via JavaScript:

const exampleEl = document.getElementById('example')
const popover = await openFrontend.Popover.then(component => component.getOrCreateInstance(exampleEl, options))

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

The final configuration object is the merged result of data-bs-config, data-bs-, and js object where the latest given key-value overrides the others.

Using function with popperConfig

const popover = await openFrontend.Popover.then(component => component.getOrCreateInstance(exampleEl, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
}))

Methods

// getOrCreateInstance example
const popover = await openFrontend.Popover.then(component => component.getOrCreateInstance('#example')) // Returns a Bootstrap popover instance

// setContent example
popover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Events

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})