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;