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
className String '' Add custom class to MDBPopover <MDBPopover className="class" />
tag String 'span' Defines tag of the MDBPopover element <MDBPopover tag="section" />
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
className String '' Add custom class to MDBPopoverBody <MDBPopoverBody className="class" />
tag String 'span' Defines tag of the MDBPopoverBody element <MDBPopoverBody tag="section" />

MDBPopoverHeader

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