CODEWITHSUNDEEP
twitter-bootstraptooltip
Ben
Ben

Reputation: 562

Bootstrap tooltip causes form elements in grid layout to collapse spacing

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.

Upvotes: 3

Views: 2544

Answers (3)

Sara
Sara

Reputation: 8242

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.

Upvotes: 4

mozey
mozey

Reputation: 2292

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

Upvotes: 1

Matt
Matt

Reputation: 149

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

Upvotes: 0

Related Questions