React Bootstrap Popovers

React Popovers - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap popover is a component which displays a box with a content after a click on an element - similar to the tooltip but can contain more content.

Basic example

Click the buttons below to see tooltips:

        
            
            import React from "react";
            import { MDBPopover, MDBPopoverBody, MDBPopoverHeader, MDBBtn, MDBContainer } from "mdbreact";
  
            const PopoverPage = () => {
              return (
                <MDBContainer>
                  <div style={{ display: "flex" }} className="m-5 p-5">
                    <MDBPopover
                      placement="top"
                      popover
                      clickable
                      id="popper1"
                    >
                      <MDBBtn>popover on top</MDBBtn>
                      <div>
                        <MDBPopoverHeader>popover on top</MDBPopoverHeader>
                        <MDBPopoverBody>
                          Sed posuere consectetur est at lobortis. Aenean eu leo quam.
                          Pellentesque ornare sem lacinia quam venenatis vestibulum.
                        </MDBPopoverBody>
                      </div>
                    </MDBPopover>
  
                    <MDBPopover
                      placement="right"
                      popover
                      clickable
                      id="popper2"
                    >
                      <MDBBtn>popover on right</MDBBtn>
                      <div>
                        <MDBPopoverHeader>popover on right</MDBPopoverHeader>
                        <MDBPopoverBody>
                          Sed posuere consectetur est at lobortis. Aenean eu leo quam.
                          Pellentesque ornare sem lacinia quam venenatis vestibulum.
                        </MDBPopoverBody>
                      </div>
                    </MDBPopover>
  
                    <MDBPopover
                      placement="bottom"
                      popover
                      clickable
                      id="popper3"
                    >
                      <MDBBtn>popover on bottom</MDBBtn>
                      <div>
                        <MDBPopoverHeader>popover on bottom</MDBPopoverHeader>
                        <MDBPopoverBody>
                          Sed posuere consectetur est at lobortis. Aenean eu leo quam.
                          Pellentesque ornare sem lacinia quam venenatis vestibulum.
                        </MDBPopoverBody>
                      </div>
                    </MDBPopover>
  
                    <MDBPopover
                      placement="left"
                      popover
                      clickable
                      id="popper4"
                    >
                      <MDBBtn>popover on left</MDBBtn>
                      <div>
                        <MDBPopoverHeader>popover on left</MDBPopoverHeader>
                        <MDBPopoverBody>
                          Sed posuere consectetur est at lobortis. Aenean eu leo quam.
                          Pellentesque ornare sem lacinia quam venenatis vestibulum.
                        </MDBPopoverBody>
                      </div>
                    </MDBPopover>
                  </div>
                </MDBContainer>
              );
            }
  
            export default PopoverPage;

Popover with image

Click me Click me Click me Click me 
        
            
          import React from "react";
          import { MDBPopover, MDBPopoverBody, MDBBtn, MDBContainer } from "mdbreact";
  
          const PopoverPage = () => {
            return (
              <MDBContainer>
                <h4 className="mt-5">Popover with image</h4>
                <div className="d-flex justify-content-center">
                  <MDBPopover
                    placement="top"
                    popover
                    clickable
                    id="popper5"
                  >
                    <MDBBtn color="purple">click me</MDBBtn>
                    <div>
                      <MDBPopoverBody>
                        <img src="https://mdbootstrap.com/img/logo/mdb192x192.webp" alt="" />
                      </MDBPopoverBody>
                    </div>
                  </MDBPopover>
  
                  <MDBPopover
                    placement="bottom"
                    popover
                    clickable
                    id="popper6"
                  >
                    <MDBBtn color="purple">click me</MDBBtn>
                    <div>
                      <MDBPopoverBody>
                        <img src="https://mdbootstrap.com/img/Others/documentation/img%20(30)-mini.webp" alt="" />
                      </MDBPopoverBody>
                    </div>
                  </MDBPopover>
  
                  <MDBPopover
                    placement="left"
                    popover
                    clickable
                  >
                    <MDBBtn color="purple">click me</MDBBtn>
                    <div>
                      <MDBPopoverBody>
                        <img src="//placehold.it/100x50" alt="" />
                      </MDBPopoverBody>
                    </div>
                  </MDBPopover>
  
                  <MDBPopover
                    placement="right"
                    popover
                    clickable
                    id="popper7"
                  >
                    <MDBBtn color="purple">click me</MDBBtn>
                    <div>
                      <MDBPopoverBody>
                        <img src="//placehold.it/50x50" alt="" />
                      </MDBPopoverBody>
                    </div>
                  </MDBPopover>
                </div>
              </MDBContainer>
            );
          }
  
          export default PopoverPage;

React Popovers - API

In this section you will find advanced information about the Popovers component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

        
            
            import { MDBPopover } from 'mdbreact';
        
            OR:
        
            import { MDBPopper } from 'mdbreact';

Usage

Use MDBPopover as a wrapper. First child is the component which will be visible in the DOM and aimed by the tooltip; and the second one is your tooltip content. If you use html element as the first argument, remember to add domElement property to the MDBPopover.

        
            
          <MDBPopover
            placement="left"
          >
              <MDBBtn>Tooltip on left</MDBBtn>
              <div>
                  Tooltip on left
              </div>
          </MDBPopover>
        
        
    
        
            
                <MDBPopover
                  placement="left"
                  domElement
              >
                  <span>Tooltip on left</span>
                  <span>
                      Tooltip on left
                  </span>
              </MDBPopover>

API Reference: MDBPopper Properties

Name Type Default Description Example
clickable Boolean false If set to true - tooltip is controlled by mouse click. <MDBPopper clickable ... />
domElement Boolean false Use this prop, when tooltip component doesn't accept innerRef property (HTML elements). <MDBPopper domElement ... />
modifiers Object Property used by Popper.js to customize popper element; find more here (click) <MDBPopper modifiers={{ preventOverflow: { enabled: false } }} ... />
id String popper Property used to distinguish tooltip/popover elements from eachother for outside click recognition. <MDBPopper id="greatPopover" ... />
isVisible Boolean false Sets the default state of the tooltip, or use it like the value in controlled inputs - combined with onChange method. <MDBPopper isVisible={this.state.isVisible} onChange={this.setVisibility} ... />
placement String top Determines tooltip placement. Choose from left | right | top | bottom <MDBPopper placement='top' ... />
popover Boolean false Converts tooltip styling to popover styling. <MDBPopper popover ... />
style Object { display: 'inline-block' } Applies custom style rules for the element which wraps tooltip aimed component. <MDBPopper style={{ display: "block" }} ... />
tag String div Sets custom tag for the element which wraps tooltip aimed component. <MDBPopper tag="span" ... />

API Reference: MDBPopper Methods

Name Parameters Description Example
onChange This event fires immediately when the popper state changes; return false/true. <MDBPopper onChange={this.updatePopoverState} />

API Reference: MDBPopoverBody Properties

The table below shows the configuration options of the MDBPopoverBody component.

Name Type Default Description Example
className String Adds custom class to the MDBPopoverBody component <MDBPopoverBody className="myCustomClass" ... />
tag String Defines custom tag of the MDBPopoverBody component <MDBPopoverBody tag="div" ... />

API Reference: MDBPopoverHeader Properties

The table below shows the configuration options of the MDBPopoverHeader component.

Name Type Default Description Example
className String Adds custom class to the MDBPopoverHeader component <MDBPopoverHeader className="myCustomClass" ... />
tag String Defines custom tag of the MDBPopoverHeader component <MDBPopoverHeader tag="p" ... />