Bootstrap工具提示需要单行

时间:2014-09-14 12:26:48

标签: twitter-bootstrap twitter-bootstrap-3 tooltip

我使用bootstrap为下拉控件创建了一个工具提示。它显示了工具提示。 但由于此控件在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>

2 个答案:

答案 0 :(得分:31)

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

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

答案 1 :(得分:12)

虽然克里斯蒂娜的答案有效,但它只会解决问题并可能在其他方面造成其他问题。在bootstrap文档中提到了这一点:

  

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

     

请参阅Bootstrap docs

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

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

希望这会有所帮助