Rate this docs

React Bootstrap Popovers

React Popovers - Bootstrap 4 & Material Design

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, MDBContainer } from "mdbreact";
          
          class PopoverPage extends React.Component {
            render() {
              return (
                <MDBContainer>
                  <div style={{ display: "flex" }} className="m-5 p-5">
                    <MDBPopover
                      component="button"
                      placement="top"
                      popoverBody="popover on top"
                      className="btn btn-default"
                    >
                      <MDBPopoverHeader>popover on top</MDBPopoverHeader>
                      <MDBPopoverBody>
                        Sed posuere consectetur est at lobortis. Aenean eu leo quam.
                        Pellentesque ornare sem lacinia quam venenatis vestibulum.
                      </MDBPopoverBody>
                    </MDBPopover>
                    <MDBPopover
                      component="button"
                      placement="right"
                      popoverBody="popover on right"
                      className="btn btn-default"
                    >
                      <MDBPopoverHeader>popover on right</MDBPopoverHeader>
                      <MDBPopoverBody>
                        Sed posuere consectetur est at lobortis. Aenean eu leo quam.
                        Pellentesque ornare sem lacinia quam venenatis vestibulum.
                      </MDBPopoverBody>
                    </MDBPopover>
                    <MDBPopover
                      component="button"
                      placement="bottom"
                      popoverBody="popover on bottom"
                      className="btn btn-default"
                    >
                      <MDBPopoverHeader>popover on bottom</MDBPopoverHeader>
                      <MDBPopoverBody>
                        Sed posuere consectetur est at lobortis. Aenean eu leo quam.
                        Pellentesque ornare sem lacinia quam venenatis vestibulum.
                      </MDBPopoverBody>
                    </MDBPopover>
                    <MDBPopover
                      component="button"
                      placement="left"
                      popoverBody="popover on left"
                      className="btn btn-default"
                    >
                      <MDBPopoverHeader>popover on left</MDBPopoverHeader>
                      <MDBPopoverBody>
                        Sed posuere consectetur est at lobortis. Aenean eu leo quam.
                        Pellentesque ornare sem lacinia quam venenatis vestibulum.
                      </MDBPopoverBody>
                    </MDBPopover>
                  </div>
                </MDBContainer>
              );
            }
          }
          export default PopoverPage;
          
      

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, MDBPopoverBody, MDBPopoverHeader } from "mdbreact";
            

API Reference: MDBPopover Properties

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

Name Type Default Description Example
arrowClass String Adds custom class to the Popover arrow <MDBPopover arrowClass="myCustomClass" ... />
component String Defines custom tag of the Popover aimed component <MDBPopover component="button" ... />
className String Adds custom class to the Popover aimed component. <MDBPopover className="myCustomClass" ... />
placement String Determines Popover placement. Choose from left | right | top | bottom <MDBPopover placement='top' ... />
tag String Sets custom tag for the element which wraps Popover aimed component. <MDBPopover tag="div" ... />
popoverClass String Sets Popover's custom class <MDBPopover popoverClass="myCustomClass" ... />
popoverBody String Sets content of the Popover aimed component. <MDBPopover popoverBody="MDBPopover on left" ... />

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" ... />
component 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" ... />