Twitter bootstrap tooltips over buttons inside a table that don't display correctly

Question

I am trying to show tooltip buttons inside a table using twitter bootstrap.

The problem is that tooltips insert extra space between the buttons, and the last button no longer has rounded corners. How can this be fixed?

Another problem is that if the button opens a modal dialog box, after closing it, the button receives focus, and the tooltip is displayed again.

Buttons are created using ajax requests, so here is how I initialize the tooltips:

$('body').tooltip({ selector: '[rel=tooltip]:not(.disabled)', live: true, container: 'body' 

});

Here is the jsfiddle for it: http://jsfiddle.net/danut007ro/y8vNr/

Answer 1

The problem is this:

 .btn-group>.btn+.btn { margin-left: -1px; } 

There is a border, and you use the -1 field to hide your side so that it looks like a separate border line. If you want to stop jumping, delete this rule, but then you will see two boundary lines between the buttons.

The real solution would be to use this (besides removing the above rule):

 .btn { border-left: 1px solid #ccc; } .btn:last-child { border-right: 1px solid #ccc; } 

Answer 2

Set the data-container = "body" attribute on the button elements that add the tool element to the body. It fixes a jerk, as well as a border radius problem on the last button.