Bootstrap 3 工具提示被包裹在每个空白处？答案

【问题标题】：Bootstrap 3 tooltip gets wrapped on every white space?Bootstrap 3 工具提示被包裹在每个空白处？
【发布时间】：2014-06-16 10:32:40
【问题描述】：

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

我相信这是因为网格。

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

如果我执行 data-placement=top，那么一切似乎都很好。

我玩过 css 来让它工作。

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

但是当它长于 200 像素时它应该换行也是不可接受的。

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

这是表格

 <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

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

 .tooltip {min-width:200px;}

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

【讨论】：

我已经接受了答案，但现在我有另一个问题。如果工具提示只有一个单词，它会显示 200 px 的长度，而且看起来一点也不好看？
您可以进一步为更宽的工具提示（即工具提示范围）指定 CSS 选择器，然后仅在具有宽工具提示的地方应用此类。bootply.com/TR2m68ySO2

【解决方案2】：

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

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

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

（tooltip-wide是为了让css不影响其他tooltips）

【讨论】：

【解决方案3】：

我通过直接从" " to "&nbsp;"切换标题属性的字符串来解决了同样的问题

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

您还可以留下一个常规的" "，它将为多行工具提示换行。

【讨论】：

极好的解决方案，比强制工具提示宽度好得多。

【解决方案4】：

由于硬编码的工具提示 width 或 min-width 会给我带来其他问题，并且添加不可破坏的空格不可读/不适合动态或长文本，因此我正在寻找另一种解决方案。

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

【讨论】：