Problem with hover on button group rounded


Topic: Problem with hover on button group rounded

bitjuice pro asked 5 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 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.


Bartosz Termena staff answered 5 years ago

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 5 years ago

Ok, it works.

Thanks


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • 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
Tags