Bootstrap tooltip causes form elements in grid layout to collapse spacing

Question

I have an issue where the Bootstrap tooltip causes spacing on my input fields to collapse. The markup is:

<form>
  <div class="controls controls-row">
    <input class="span4" data-original-title="Default tooltip" rel="tooltip" type="text" placeholder=".span4">
    <input class="span1" data-original-title="Default tooltip" rel="tooltip" type="text" placeholder=".span1">
  </div>
</form>

and I'm just using the default for the wireup:

$('[rel="tooltip"]').tooltip();

I've created a jsFiddle here to show the problem: http://jsfiddle.net/bAaQP/2/

Note that when an input receives focus, it collapses the whitespace to the right of the control.

I'm just using the example grid form from Bootstrap 2.2.2. The form elements have relative span sizing set and are contained within a div decorated with the controls-row class.

I've tried with the latest version of Bootstrap-tooltip.js as well but it still shows the same behavior.

Answer 1

Edit: Bootstrap has added a container option to tooltips and popovers since version 2.3.0 which addresses this issue.

Usage:

$('[rel="tooltip"]').tooltip({
    container: '.controls'
});

---

This appears to be a somewhat obscure bug in Bootstrap.

When the tooltip appears between the two spans, it nullifies this CSS style (line 1319 of bootstrap.css):

.controls-row [class*="span"] + [class*="span"] {
    margin-left: 20px;
}

Which leaves margin-left: 0, causing the whitespace jump. Here's a jsFiddle using the tooltip 'click' trigger so you can observe this behavior with your inspector of choice.

You can add the following CSS as a hack fix for your purposes:

.controls-row [class*="span"] + .tooltip + [class*="span"] {
    margin-left: 20px;
}

Better solution: open an issue to report the bug.

Answer 2

This is not a bug in Bootstrap, there is an easy solution to the problem. Just pass in the container option when creating the tooltip:

$(".my-input").tooltip({
...
container: "body"
});