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.

Sara · Accepted Answer · 2013-04-18 16:11:33Z

4

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.

edited Apr 18, 2013 at 16:11

answered Jan 25, 2013 at 4:56

Sara

8,2521 gold badge40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mozey Over a year ago

I believe this is not a bug, see my answer.

Aaron Over a year ago

@Sara, thanks I wasn't aware of the container property. For my SPA I set container: 'body', as I'm triggering the tooltip class only once, during 'startup'.

mozey · Accepted Answer · 2013-04-18 13:23:20Z

1

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

answered Apr 18, 2013 at 13:23

mozey

2,3022 gold badges28 silver badges38 bronze badges

2 Comments

Sara Over a year ago

This option was added in 2.3.0 on February 7 (after this question was asked), possibly to address this exact issue!

mozey Over a year ago

Ah yes, I think you are right, notice the question was w.r.t. Bootstrap 2.2.2

Matt · Accepted Answer · 2013-04-07 17:03:34Z

0

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

answered Apr 7, 2013 at 17:03

Matt

1491 silver badge7 bronze badges

Collectives™ on Stack Overflow

Bootstrap tooltip causes form elements in grid layout to collapse spacing

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related