Popovers

React Bootstrap 5 Popovers component

Documentation and examples for adding popovers, like those found in iOS, to any element on your site.

Note: Read the API tab to find all available options and advanced customization

Basic example

        
            
          import React from 'react';
          import { MDBPopover, MDBPopoverBody, MDBPopoverHeader } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBPopover size='lg' color='danger' btnChildren='Click to toggle popover'>
                <MDBPopoverHeader>Popover title</MDBPopoverHeader>
                <MDBPopoverBody>And here's some amazing content. It's very engaging. Right?</MDBPopoverBody>
              </MDBPopover>
            );
          }

Overview

Things to know when using the popovers:

  • 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.

Four directions

Four options are available: top, right, bottom, and left aligned.

        
            
          import React from 'react';
          import { MDBPopover, MDBPopoverBody, MDBPopoverHeader } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <>
                <MDBPopover color='secondary' btnChildren='Popover on top' placement='top'>
                  <MDBPopoverHeader>Popover title</MDBPopoverHeader>
                  <MDBPopoverBody>And here's some amazing content. It's very engaging. Right?</MDBPopoverBody>
                </MDBPopover>
    
                <MDBPopover color='secondary' btnChildren='Popover on right' placement='right'>
                  <MDBPopoverHeader>Popover title</MDBPopoverHeader>
                  <MDBPopoverBody>And here's some amazing content. It's very engaging. Right?</MDBPopoverBody>
                </MDBPopover>
    
                <MDBPopover color='secondary' btnChildren='Popover on bottom' placement='bottom'>
                  <MDBPopoverHeader>Popover title</MDBPopoverHeader>
                  <MDBPopoverBody>And here's some amazing content. It's very engaging. Right?</MDBPopoverBody>
                </MDBPopover>
    
                <MDBPopover color='secondary' btnChildren='Popover on left' placement='left'>
                  <MDBPopoverHeader>Popover title</MDBPopoverHeader>
                  <MDBPopoverBody>And here's some amazing content. It's very engaging. Right?</MDBPopoverBody>
                </MDBPopover>
              </>
            );
          }

Dismiss on next click

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

Specific markup required for dismiss-on-next-click:
For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include a tabindex attribute.

Dismissible popover 
        
            
          import React from 'react';
          import { MDBPopover, MDBPopoverBody, MDBPopoverHeader } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBPopover size='lg' color='danger' btnChildren='Dismissible popover' dismiss>
                <MDBPopoverHeader>Popover title</MDBPopoverHeader>
                <MDBPopoverBody>And here's some amazing content. It's very engaging. Right?</MDBPopoverBody>
              </MDBPopover>
            );
          }

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> and override the pointer-events on the disabled element.

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

        
            
          import React from 'react';
          import { MDBPopover, MDBPopoverBody } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBPopover
                tag='span'
                btnClassName='d-inline-block'
                btnChildren={<MDBBtn disabled>Disabled button</MDBBtn>}
                placement='right'
                disabled
              >
                <MDBPopoverBody>Disabled popover</MDBPopoverBody>
              </MDBPopover>
            );
          }

Popovers - API

Import

        
            
            import { MDBPopover, MDBPopoverBody, MDBPopoverHeader } from 'mdb-react-ui-kit';

Properties

MDBPopover

Name Type Default Description Example
btnChildren ReactNode MDBBtn Render elements to button children <MDBPopover btnChildren="text" />
btnClassName String '' Add custom classes to MDBBtn <MDBPopover btnClassName="text" />
dismiss Boolean false Set dismiss on the next click <MDBPopover dismiss />
isOpen Boolean false Set open popover on mounted component <MDBPopover isOpen={true} />
options Object {} Set custom options from react-popper options. <MDBPopover options={{modifiers:{...}}} />
placement String top Set placement to popper. <MDBPopover placement='bottom' />
poperStyle Object {} Set styles to popper element. <MDBPopover poperStyle={{height:100}} />
popperTag String {} Set custom tag to popper component.. <MDBPopover popperTag='span' />

MDBPopoverBody

Name Type Default Description Example
tag String 'span' Defines tag of the MDBPopoverBody element <MDBPopoverBody tag="section" />

MDBPopoverHeader

Name Type Default Description Example
tag String 'span' Defines tag of the MDBPopoverHeader element <MDBPopoverHeader tag="section" />

Events

Name Type Description
onHide () => any This event is fired immediately when the hide method has been called. It can be triggered in MDBPopover element
onShow () => any This event fires immediately when the show instance method is called. It can be triggered in MDBPopover element

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

SCSS variables

        
            
        $popover-font-size: $font-size-sm;
        $popover-bg: $white;
        $popover-max-width: 276px;
        $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width);

        $popover-header-font-size: $font-size-base;
        $popover-header-color: $headings-color;
        $popover-header-padding-y: 0.5rem;
        $popover-header-padding-x: $spacer;

        $popover-body-color: $body-color;
        $popover-body-padding-y: $spacer;
        $popover-body-padding-x: $spacer;

        $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: hsl(0, 0%, 96%);
        $popover-header-bg: $white;