Topic: Popover - how to implement close on click anywhere in React

ccravenbartle free asked 4 years ago

I am using MDBPopover and it works fine when I click on a button to open the popover and click on the same button to close the popover. What I would like, however, is to be able to close the popover when the user clicks anywhere. How do I do this in MDB React?

Also, the MDBootstrap React documentation on the MDBPopover does not explain what properties such as "clickable" and "popover" actually do. Where do I find this in the documentation?

Jakub Chmura staff answered 4 years ago

Hi @ccravenbartle,

You can read more about MDBPopover properties here:

I tested the component on iPad and iPhone and it works fine for me.

Below I paste the link to the example:

import React from 'react';
import { MDBPopover, MDBBtn, MDBPopoverBody, MDBPopoverHeader } from 'mdbreact';

const PopoverPage = () => {
  return (
      <MDBPopover placement='bottom' popover clickable id='popper3'>
        <MDBBtn>popover on bottom</MDBBtn>
          <MDBPopoverHeader>popover on bottom</MDBPopoverHeader>
            Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis

export default PopoverPage;

Please tell me if my example will work in your case.

Best, Kuba

ccravenbartle free commented 4 years ago

Jakub: your example works fine. Thank you for responding so quickly.

Jakub Chmura staff commented 4 years ago

I'm glad that your problem has been solved. If you have any further questions, please do not hesitate to ask us.

Best, Kuba


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.23.1
  • Device: iPad
  • Browser: Safari
  • OS: IOS
  • Provided sample code: No
  • Provided link: No