Question

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

我认为这是因为电网而发生的。

因此，如果我为文本框选择列col-sm-3，并且如果我将工具提示放在右边，它将包装所有空格并显示如下。

enter image description here

如果我执行data-placement = top，那么一切似乎都没问题。

enter image description here

我玩了css以使其正常工作。

.tooltip-inner { white-space:nowrap; }

enter image description here

但这也是不可接受的，当它比200px更长时应该换行。

我该如何解决这个问题？我想把工具提示放在右边

这是表格

 <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

Answer 1

您可以指定像这样的最小宽度..

 .tooltip {min-width:200px;}

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

Answer 2

我通过直接从" " to " "

直接切换title属性的字符串来解决同样的问题

<html>
    <!-- From: -->
    <a ... data-placement="right" title="Click to zoom"></a>
    <!-- To: -->
    <a ... data-placement="right" title="Click&nbsp;to&nbsp;zoom"></a>
</html>

您还可以保留常规" "，以便为多行工具提示打破行。

Answer 3

考虑设置最大宽度限制，而不是设置最小宽度：

.tooltip-wide .tooltip.bottom, .tooltip-inner  {
  max-width: none;
}

<a [tooltip]='acctTooltip' class='tooltip-wide' placement='bottom'>blah blah</a>

（整个工具提示都是为了防止css影响其他工具提示）

Answer 4

由于硬编码的工具提示width或min-width给我带来了其他问题，并且添加不易碎的空格不可读/不适合/特别是对于动态文本或长文本，我一直在寻找其他解决方案。

添加属性data-container="body"为我解决了这个问题，似乎对父级宽度有些依赖性。

Bootstrap 3工具提示包裹在每个空白区域？

4 个答案: