Problem with hover on button group rounded

Topic: Problem with hover on button group rounded

bitjuice pro asked 4 years ago

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

Bartosz Termena staff commented 4 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.

Add comment

Bartosz Termena staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

bitjuice pro commented 4 years ago

Ok, it works.

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: 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

bitjuice

Pro User 472Support score
44Questions 25Answers 0Snippets