mdbPopover custom class option

Topic: mdbPopover custom class option

nick23 free asked 6 years ago

Hi guys, how can I add my ‘custom’ class to the mdbPopover container? It is possible?

<button type="button" mdbBtn color="primary"
    mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
    mdbPopoverHeader="Popover on hover"
    triggers="hover">
   Popover example
</button>

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear @nick23 Unfortunately, there's no way to overwrite the style of only one popover. Best Regards, Damian

japan priority commented 5 years ago

Dear @Damian Gemza, I agree with @nick23. I find that custom class idea useful, because I have a specific popover in a project and need to change just that one and avoid changing css for all popovers across the project. To be more specific - my popover is being displayed inside a container and in order to put it on top of the container (not to hide it behind the edges of the container), I need to specify container="body". I discovered that for this case I need to change the default .popover class to decrease the max-width of the popover. If I don't, the popover is not displayed in a situation when the container is too narrow for the default max-width (it shouldn't be a problem since it's being bound to , but unfortunately it doesn't work as expected). It's a specific case and obviously a bug, however this could be easily solved if I could pass my custom style to this popover instance. Hope this makes sense. Best regards. Jarda

<p>Dear <a href="/profile/?id=29824" target="_blank" rel="nofollow">@Damian Gemza</a>, I agree with <a href="/profile/?id=49424" target="_blank" rel="nofollow">@nick23</a>. I find that custom class idea useful, because I have a specific popover in a project and need to change just that one and avoid changing css for all popovers across the project. To be more specific - my popover is being displayed inside a container and in order to put it on top of the container (not to hide it behind the edges of the container), I need to specify <strong>container="body"</strong>. I discovered that for this case I need to change the default .popover class to decrease the max-width of the popover. If I don't, the popover is not displayed in a situation when the container is too narrow for the default max-width (it shouldn't be a problem since it's being bound to , but unfortunately it doesn't work as expected). It's a specific case and obviously a bug, however this could be easily solved if I could pass my custom style to this popover instance. Hope this makes sense. Best regards. Jarda</p>

Please insert min. 15 characters.

Bartosz Termena staff commented 5 years ago

Dear @japan

We will take closer look at that and try to add such an option in the future.

Best Regards, Bartosz.

Add comment

nick23 free answered 6 years ago

0 0 Best answer

Hi Damian, thanks for the answer. I want to customize some specific default popover without changing style of the all popovers in the page/project. How can I do it? Thanks

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Nick23, Unfortunately, it's not possible to add a custom class to the mdbPopover container. Could you please specify, why you want to add there some class? Maybe your problem could be resolved with some built-in feature in Popover. Best Regards, Damian

nick23 free commented 6 years ago

Hi Damian, thanks for the answer. I want to customize some specific default popover without changing style of the all popovers in the page/project. How can I do it?

Thanks

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 6.2.3
Device: desktop
Browser: chrome
OS: win10
Provided sample code: No
Provided link: No

nick23

-10Support score
0Questions 1Answers 0Snippets