如何使Twitter Bootstrap工具提示有多行？

Question

我目前正在使用以下函數來創建將使用Bootstrap的工具提示插件顯示的文本。 為什么多行工具提示只適用於<br>而不是\\n ？ 我更喜歡鏈接的標題屬性中沒有任何HTML。

什么有效

def tooltip(object)
  tooltip = ""
  object.each do |user|
    tooltip += "#{user.identifier}" + "<br>"
  end
  return tooltip
end

我想要的是

def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end

Answer 1

您可以使用white-space:pre-wrap工具提示。 這將使工具提示尊重新線。 如果行長度超過容器的默認最大寬度，則行仍將換行。

.tooltip-inner {
    white-space:pre-wrap;
}

http://jsfiddle.net/chad/TSZSL/52/

如果要阻止文本換行，請執行以下操作。

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

http://jsfiddle.net/chad/TSZSL/53/

這些都不\\n於html中的\\n ，它們實際上必須是實際的換行符。 或者，您可以使用編碼換行符
 ，但這可能比使用<br>更不可取。

Answer 2

你可以使用html屬性： http ： //jsfiddle.net/UBr6c/

My <a href="#" title="This is a<br />test...<br />or not" class="my_tooltip">Tooltip</a> test.

$('.my_tooltip').tooltip({html: true})

Answer 3

如果您在非鏈接元素上使用Twitter Bootstrap Tooltip，您可以使用data參數指定，您需要直接在HTML代碼中使用多行工具提示而不使用Javascript：

<span rel="tooltip" data-html="true" data-original-title="1<br />2<br />3">5</span>

這只是costales答案的替代版本。 所有的榮耀歸於他！ ：]

Answer 4

如果您使用的是Angular UI Bootstrap，則可以使用帶有html語法的tooltip-html-unsafe ： tooltip-html-unsafe

例如更新到角1.2.10＆angular-ui-bootstrap 0.11： http ： //jsfiddle.net/aX2vR/1/

舊的： http ： //jsfiddle.net/8LMwz/1/

Answer 5

在Angular UI Bootstrap 0.13.X中，不推薦使用tooltip-html-unsafe。 您現在應該使用tooltip-html和$ sce.trustAsHtml（）來完成帶有html的工具提示。

https://github.com/angular-ui/bootstrap/commit/e31fcf0fcb06580064d1e6375dbedb69f1c95f25

<a href="#" tooltip-html="htmlTooltip">Check me out!</a>

$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

Answer 6

Angular Bootstrap的CSS解決方案是

::ng-deep .tooltip-inner {
  white-space: pre-wrap;
}

如果您不需要限制它的使用，則無需使用父元素或類選擇器。 復制/意大利面，此規則將適用於所有子組件