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' placement='right'>
                <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 <MDBPopoverHeader> and <MDBPopoverBody> values will never show a popover.
  • 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. Add className .text-nowrap on your <MDBPopover>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 dismiss trigger to dismiss popovers on the user’s next click of a different element than the toggle element.

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  placement='right'>
                <MDBPopoverHeader>Dismissible popover</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 click them to trigger a popover (or tooltip). As a workaround create btnChildren element with attribute disable and change wrapper tag tag='span'. 

        
            
          import React from 'react';
          import { MDBPopover, MDBPopoverBody, MDBBtn } 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'
              >
                <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 />
open Boolean false Set open popover on mounted component <MDBPopover open={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' />
disablePortal Boolean false When true, component will be rendered in standard DOM hierarchy. <MDBPopover disablePortal />

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
onClose () => any Fires when the popover demands to be hidden.
onOpen () => any Fires when the popover demands to be shown.

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;