Clever Geek Handbook

Bootstrap tooltip causes form elements to appear in grid layout to collapse spacing

I have a problem where the Bootstrap tooltip causes the spacing to break between my input fields. Markup:

<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 just use the default for the connection:

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

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

Note that when an input receives focus, it clears the spaces to the right of the control.

I'm just using the example grid shape from Bootstrap 2.2.2. Form elements have a relative set of run sizes and are contained within a div decorated with a control class.

I've tried with the most recent version of Bootstrap-tooltip.js too, but it still shows the same behavior.

+3


source to share


3 answers


Edit : Bootstrap added an option container

for tooltips and popups as of version 2.3.0 , which addresses this question.

Using:

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

This seems to be a somewhat confusing bug in Bootstrap.

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



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

Which leaves margin-left: 0

, forcing the gap to jump. Here's a jsFiddle with a 'click' prompt so you can observe this behavior with your inspector of choice.

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

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

Best solution: open the problem to report a bug.

+5


source


This is not a bug in Bootstrap , there is an easy fix. Just go to the container when you create the tooltip :



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


source


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

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


source






More articles:


All Articles