Bootstrap 3工具提示会包裹在每个空白处吗? [英] Bootstrap 3 tooltip gets wrapped on every white space?

问题描述

升级到Bootstrap 3之后，工具提示会包裹在每个空白处.

After Upgrading to bootstrap 3 the tooltips are getting wrapped on every white space.

我相信这是由于网格而发生的.

I believe that this is happening because of the grid.

因此，如果我为文本框选择col-sm-3列，并且如果将工具提示放在右侧，则它将包裹所有空白并显示如下.

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.

如果我执行data-placement = top，那么一切似乎都还可以.

If I do the data-placement=top then everything seems okay.

我和CSS一起玩耍以使其正常工作.

I played around with css to get it work.

.tooltip-inner {空白:nowrap;}

但是这也不可接受，当它的长度大于200px时，应该换行.

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

这是表格

 <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

推荐答案

您可以指定一个最小宽度.

You can specify a min-width like this..

 .tooltip {min-width:200px;}

演示: http://www.bootply.com/kFfEAk0m1O

这篇关于Bootstrap 3工具提示会包裹在每个空白处吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！