引导工具提示需要在单行中答案

【问题标题】：Bootstrap tooltip need to be in single line引导工具提示需要在单行中
【发布时间】：2014-09-14 12:26:48
【问题描述】：

我使用引导程序创建了一个工具提示，用于下拉控制。它显示工具提示。但由于此控件绑定在class="col-sm-4" 内，因此工具提示文本被换行。但我希望在一行中显示这一点。有什么想法吗？

<div class="col-sm-4">
                <select class="form-control" id="ddlSchoolAttended" data-toggle="tooltip" data-placement="right" title="Some tooltip 2!Some tooltip 2!Some ">
          <option value="08">08 -Year 8 or below</option>
    <option value="09">09 -Year 9 or equivalent</option>
    <option value="10">10 -Completed Year 10</option>
    <option value="11">11 -Completed Year 11</option>
    <option value="12">12 -Completed Year 12</option>
    <option selected="selected" value="">--Not Specified--</option>
          </select><br/>
</div>

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 tooltip

【解决方案1】：

.tooltip-inner {
  white-space:nowrap;
  max-width:none;
}

在 Bootstrap CSS 之后将此添加到您的 CSS 中。但是，在较小的视口上使用右侧的悬停，甚至是右侧的自动悬停将在屏幕外，但由于较小的视口通常是触摸的，因此悬停可能需要双击才能工作。我通常使用脚本来检测 IOS、Android 和 Windows 移动设备的触摸，然后只在非触摸设备上使用工具提示，因此这不会干扰用户点击。

【讨论】：

【解决方案2】：

虽然克里斯蒂娜的答案有效，但它只会修补问题，并可能在其他地方产生其他问题。在引导文档中提到了这一点：

按钮组、输入组和表格中的工具提示需要特殊设置在 .btn-group 或 .input-group 中的元素或与表相关的元素上使用工具提示时，您必须指定选项 container: 'body' 以避免不必要的副作用（例如元素变宽和/或在触发工具提示时失去圆角）。

见Bootstrap docs

所以你需要做的就是像这样添加container: 'body'：

$(function () {
    $('[data-toggle="tooltip"]').tooltip({container: 'body'})}
);

希望对你有帮助

【讨论】：