Popover with custom compoent


Topic: Popover with custom compoent

Josh Muir asked 6 years ago

I'm trying to use the popover with a custom component, however the documentation is somewhat lacking (there only appears to be an example). I've looked through react-popper etc. and just can't work out how to do it. Could anyone shed some light on this for me? I'm trying to use a font awesome icon. (I'm using the example code: https://mdbootstrap.com/react/advanced/popovers/ ) Thanks!

Jakub Mandra staff premium answered 6 years ago

Hello,

If you want to have custom content inside your popover you just need to wrapp your component inside <PopoverBody> .

There are some warnings in npm which are caused by bootstraps dependencies.

We will gradually get rid of them in future releases.

 

But what it exactly means that you moved back and dependencies don't work?

I suggest you to:

  1. remove 'mdbreact' from dependencies in package.json
  2. run yarn/npm install
  3. bring back mdbreact
  4. run yarn/npm install

Than it should work.

 

Best regards,

Jakub from MDB


Josh Muir commented 6 years ago

I managed to resolve my dependency issues a different way. Thanks though.

Josh Muir commented 6 years ago

I did not mean a custom component within the body, I meant instead of a button to open the popover

Jakub Mandra staff premium answered 6 years ago

Hi Josh, Now I see what was under your concern. Unfortunetaly you can only use the html element with string content (button, div, p etc.). This is affected by the most common use case of that component.   Best regards, Jakub from MDB
Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No