Topic: Problem with hover on button group rounded
Hi,
I have a visualization problem with mouse hover on rounded button group.
If I add mdbTooltip attribute to buttons, when mouse hover event is fired, the last button of the group becomes rectangular and no longer rounded
This is the code:
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<button mdbBtn type="button" rounded="true" color="primary" size="sm" class="waves-light" mdbTooltip="tooltip text" mdbWavesEffect>Left</button>
<button mdbBtn type="button" rounded="true" color="warning" size="sm" class="waves-light" mdbTooltip="tooltip text" mdbWavesEffect>Middle</button>
<button mdbBtn type="button" rounded="true" color="danger" size="sm" class="waves-light" mdbTooltip="tooltip text" mdbWavesEffect>Right</button>
</div>
How can I fix it?
Thanks
Marco
Dear @bitjuice
Try to add to your mdbTooltip container="body", like below:
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<button
mdbBtn
type="button"
container="body"
rounded="true"
color="primary"
size="sm"
class="waves-light"
mdbTooltip="tooltip text"
mdbWavesEffect
>
Left
</button>
<button
mdbBtn
container="body"
type="button"
rounded="true"
color="warning"
size="sm"
class="waves-light"
mdbTooltip="tooltip text"
mdbWavesEffect
>
Middle
</button>
<button
mdbBtn
type="button"
container="body"
rounded="true"
color="danger"
size="sm"
class="waves-light"
mdbTooltip="tooltip text"
mdbWavesEffect
>
Right
</button>
</div>
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.3.1
- Device: PC
- Browser: Chorme
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Bartosz Termena staff commented 5 years ago
Dear @bitjuice Thank you for your response, we will take a closer look at this problem, and try to fix it.
I will let you know when something changes.
Best Regards, Bartosz.