Bootstrap 5 Popover component

Popovers - API

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

        
            
          import { Popover, initMDB } from "mdb-ui-kit";
          
          initMDB({ Popover });
        
        
    

        
            
          import "mdb-ui-kit"
        
        
    

Usage

Via data attributes

Using the Popovers component doesn't require any additional JavaScript code - simply add data-mdb-popover-init attribute to toggle element and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

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

Via JavaScript:

        
            
            const element = document.getElementById('example')
            const instance = new Popover(exampleEl, options)
          
        
    

        
            
            const element = document.getElementById('example')
            const instance = new mdb.Popover(exampleEl, options)
          
        
    

Making popovers work for keyboard and assistive technology users

To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <span>s) can be made focusable by adding the tabindex="0" attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover’s content in this situation. Additionally, do not rely solely on hover as the trigger for your popovers, as this will make them impossible to trigger for keyboard users.

While you can insert rich, structured HTML in popovers with the html option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the aria-describedby attribute. As a result, the entirety of the popover’s content will be announced to assistive technology users as one long, uninterrupted stream.

Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the allowList or allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document’s structure, there is no guarantee that moving forward/pressing TAB will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-animation="".

Note: For security reasons the sanitize, sanitizeFn and allowList options cannot be supplied using data attributes.

Data attributes for individual popovers:
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.

Methods

Asynchronous methods and transitions:
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

        
            
          const exampleTriggerEl = document.getElementById('example')
          const popover = new Popover(exampleTriggerEl)
          popover.show()
        
        
    

        
            
          const exampleTriggerEl = document.getElementById('example')
          const popover = new mdb.Popover(exampleTriggerEl)
          popover.show()
        
        
    

Events

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

CSS variables

As part of MDB’s evolving CSS variables approach, popover 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.

        
            
        // .popover
        --#{$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);
        --#{$prefix}popover-border-bottom-width: #{$popover-border-bottom-width};
        
        
    

SCSS variables

        
            
        $popover-font-size: $font-size-sm;
        $popover-bg: var(--#{$prefix}surface-bg);
        $popover-max-width: 276px;
        $popover-inner-border-radius: calc(
          #{$popover-border-radius} - #{$popover-border-width}
        );

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

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

        $popover-arrow-width: 1rem;
        $popover-arrow-height: 0.5rem;

        $popover-arrow-color: $popover-bg;
        $popover-arrow-outer-color: var(--#{$prefix}border-color-translucent);

        $popover-box-shadow: $box-shadow-2;
        $popover-border-radius: $border-radius-lg;
        $popover-border-bottom-width: $border-width-alternate;
        $popover-border-width: 1px;
        $popover-border-color: var(--#{$prefix}divider-color);