Popover

Venky asked 6 years ago

Hi,

I've a small question on Popover.

If we click outside of the component the Popover is getting hidden which is a normal behavior but when we click on the Popover header or body also it's getting hidden, instead can we close the Popover on click of any action buttons (close icon on the header part / cancel button on the body part) inside of the Popover...?

Resources (screenshots, code snippets etc.)

<MDBPopover component="button" tag="div" placement="top" popoverBody="Filters" className="btn btn-dark btn-sm float-right">
    <MDBPopoverHeader className="elegant-color white-text font-weight-bold">
        <span>Filters</span>
        <button type="button" className="close float-right" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
    </MDBPopoverHeader>
    <MDBPopoverBody className="elegant-color white-text" tag="div">
        <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
        <span>Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
        <MDBInput className="p-2" onChange={() => this.inputChange()} />
        <MDBBtn type="button" color="primary" className="">Ok</MDBBtn>
    </MDBPopoverBody>
</MDBPopover>

Let's I've a code like this and when I click on the Ok or x buttons on the Popover then only the it should disappear/close

Thanks :)


Jakub Mandra staff premium answered 6 years ago

Hi,

We are working on the complete rebuild of the Popover. You will be able to customize content as you want. So features like that could be added as well.

Follow up our changelog here: https://mdbootstrap.com/docs/react/changelog/

Best,

Jakub


Venky commented 6 years ago

Thanks for the update :)


Jakub Mandra staff premium commented 6 years ago

If you need anything else please let me know.

Also, check our changelog on Monday https://mdbootstrap.com/docs/react/changelog/

Best,

Jakub


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.11.1
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags