Bootstrap tooltip causes form elements in grid layout to collapse spacing

3
votes

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.

3
twitter-bootstraptooltip

3 Answers

5
votes

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'
});

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.

1
votes

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"
});
0
votes

I had a similar problem when using popovers today. @Sara's answer was very helpful (and I would comment on it if I had the reputation) but I had to change .tooltip to .popover and the margin-left value to 22px to get it to look right.

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