Bootstrap button group malfunction when they have tooltips

Question

I have one group button with a hint enabled for each button. When you hover over the last button in a group, the tooltip causes misalignment, and the border of the button is no longer rounded. I know that the tooltip style overrides the button style, but I cannot find where it is.

DEMO: Bootply

UPDATE:

Fixed by changing the <a> element on the <button> element and then using a custom style

Button

 <button class="btn btn-small btn-danger" data-toggle="modal" title="Unlink" data-target="#@item.WOWorkPermitID"><i class="icon-resize-full icon-white"></i></button> 

CSS

 .btn-group > .btn:last-of-type { -webkit-border-top-right-radius: 4px; -moz-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } 

DEMO → Bootply

Linked post → twitter bootstrap tooltips for buttons inside the table that do not display correctly

Answer 1

try

  $(".btn").tooltip({ 'placement': 'top', container: 'body' }); 

it worked with me :)

Answer 2

The last element is not a button, it is an anchor. Try changing it to a button, like the first two elements.