在Bootstrap中，如何使单个工具提示不包装

Question

我有一个JSFiddle：

http://jsfiddle.net/3sxez0v8/

目前，两个工具提示都包裹着。

我可以通过以下方式获得两个工具提示：

How do you change the width and height of Twitter Bootstrap's tooltips?

.tooltip-inner {
    max-width: 350px;
    width: 350px; 
}

但这会导致两个工具提示都不会换行。

我如何得到第一个不包装的工具提示？

Answer 1

我会在选项中使用模板来应用不同的html内容与不同的类for wrap和nowrap，如下所示：

$(function () {
    $('[data-toggle="tooltip"]').tooltip({template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'})
})

$(function () {
    $('[data-toggle="tooltip-nowrap"]').tooltip({template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner nowrap"></div></div>'})
})

http://jsfiddle.net/9k3Lbtr6/1/

Answer 2

Bootstrap允许您通过利用html:选项呈现具有丰富HTML内容的工具提示。因此，您可以使用不间断的空白字符替换普通的空白字符，以强制内容不会换行。

您可以利用jQuery的$.each()函数和一个简单的正则表达式.replace()来自动执行此过程。在按钮上添加类以确定何时应用强制的一行。您必须使窗口变窄（水平）才能看到效果。

http://jsfiddle.net/dixalex/vqgj8brs/1/

.tooltip-inner {
  max-width: 500px !important;
}

<div class="container-fluid">
  <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
  <div class="col-lg-10 col-md-10 ">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
      <button type="button" class="btn btn-default one-line" data-toggle="tooltip" data-placement="top" data-original-title="This is a longer tooltip which SHOULD NOT wrap" data-container="body">Tooltip No Wrap</button>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="This is a longer tooltip which SHOULD wrap" data-container="body">Tooltip top 2</button>
    </div>
  </div>
  <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
</div>

$('[data-toggle="tooltip"]').each(function(index, element) {
  var title_text = $(element).data('original-title');
  var convert_white_space = title_text.replace(/ /g, '&#160;');

  if ($(element).hasClass('one-line')) {
    $(element).attr('data-original-title', convert_white_space);
    $(element).tooltip({
      html: true,
      placement: "bottom"
    });
    console.log(convert_white_space);
  } else {
    $(element).tooltip({
      html: true,
      placement: "bottom"
    });
  }
});