Bootstrap: Tooltip-inner width issue

[ghost]

There seems to be an issue with the width of the inner-tooltip class in Bootstrap 3.1.1.
The bootstrap.css file contains the following rule:

.tooltip-inner {
max-width: 200px;
...
}

However, the tooltip does not respect the max-width of 200px (almost every word starts at a new line) when I use the following HTML code:

<div class="col-md-3 text-right">
<a href="#" id="example" data-toggle="tooltip" data-placement="right" title="This is some text to test the width of the tooltip.">Tooltip on right</a>
</div>

When I remove the class "text-right" from the outer div, the tooltip works fine:

[cvrebert]

What if you set container: 'body' in your tooltip's options? Does it work properly then?

[cvrebert]

Yes, confirmed: http://jsfiddle.net/HLWeU/

[CodySchneider]

This works for me as well, but seems a bit hacky. I've noticed the issue as well in at least Chrome and FF. Why is it that only the right placement does this and not the left, top, or bottom?

[cvrebert]

The column sets a width and the tooltip is a normal-ish descendant element of the column, thus it's constrained by the column's boundaries because that's how CSS works. Word wrapping in the old example complicates things and made this less obvious. Here's a clearer example of what's going on: http://jsfiddle.net/fcn00c5b/7/

[CodySchneider]

Thanks for the follow up. I did a bit more digging and found that I was using a btn-grp which is relatively positioned. In your example you have the column grid class which also adds position:relative. Over-riding positioning on the btn-group to initial fixed the problem for me... same with your example. Curious if you know why position is set for the grid and btn-grp classes... probably others as well. Seems like a very greedy assumption about how children would be positioned.

[cvrebert]

The grid needs it for source ordering.
Example: http://getbootstrap.com/css/#grid-column-ordering
If you remove position: relative, the example breaks.

[santosh-k1]

As per length of the text we can use max-width of .tooltip-inner like this {max-width: 200px;} and we can make diff-rant max-width size through media query... i think this is only way to use it...

[archana93]

Using just 'max-width' instead of 'width' solved the issue for me.