Menu
After Upgrading to bootstrap 3 the tooltips are getting wrapped on every white space.
I believe that this is happening because of the grid.
So if I select a column col-sm-3 for a textbox and If I place the tooltip on right it wraps all the white spaces and shows it as below.
If I do the data-placement=top then everything seems okay.
I played around with css to get it work.
.tooltip-inner {
white-space:nowrap;
}
but this is also not acceptable that it should wrap when it is longer than lets say 200px.
How can I fix this? I would like to place the tooltip on the right
here is the form
<div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(model => model.BasicDescription, new { @class = "control-label col-sm-2" })
<div class="col-sm-4">
@Html.TextBoxFor(model => model.BasicDescription, new { @class = "tip form-control", data_toggle = "tooltip", title = "Please enter a short description here, exceeding no more than 100 characters", data_placement = "right" })
@Html.ValidationMessageFor(model => model.BasicDescription)
</div>
</div>
</div
925
You can specify a min-width like this..
.tooltip {min-width:200px;}
Demo: http://www.bootply.com/kFfEAk0m1O
173
instead of setting min width, consider removing the max-width limitation:
.tooltip-wide .tooltip.bottom, .tooltip-inner {
max-width: none;
}
<a [tooltip]='acctTooltip' class='tooltip-wide' placement='bottom'>blah blah</a>
(tooltip-wide is to keep the css from affecting other tooltips)
36
I fixed the same problem by simply switching the title attribute's string directly from " " to " "
<html>
<!-- From: -->
<a ... data-placement="right" title="Click to zoom"></a>
<!-- To: -->
<a ... data-placement="right" title="Click to zoom"></a>
</html>
You can also leave a regular " " that will break line for multi-line tooltips.
27
As hardcoded tooltip width or min-width lead to other issues for me and adding non breakable spaces is not readable/suitable especially for dynamic or long texts, I was looking for another solution.
It seems to have some dependency on the parent width as adding the attribute data-container="body" solved this issue for me.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
