Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Popover with custom compoent

Josh Muir free 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 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 free commented 6 years ago

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

Josh Muir free 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 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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags