Twitter Bootstrapツールチップに複数の行を含める方法は？

現在、以下の関数を使用して、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

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/

これらはどちらも\nhtmlのa では機能せず、実際には実際の改行である必要があります。または、エンコードされた改行を使用することもできますが、を使用する
よりも望ましいとは言えません<br>。

次の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})

非リンク要素でTwitter Bootstrap Tooltip を使用している場合は、dataパラメーターのみを使用して、JavaScriptなしでHTMLコードで直接複数行のツールチップが必要であることを指定できます。

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

これは共演者の答えの代替バージョンにすぎません。すべての栄光は彼に行きます！：]

Angular UIブートストラップを使用している場合は、html構文でツールチップを使用できます。 tooltip-html-unsafe

0.11 1.2.10角度＆角度-UI-ブートストラップの例更新： http://jsfiddle.net/aX2vR/1/

古いもの：http : //jsfiddle.net/8LMwz/1/

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>!');

Angular BootstrapのCSSソリューションは

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

使用を制限する必要がない場合は、親要素またはクラスセレクターを使用する必要はありません。コピー/パスタ、このルールはすべてのサブコンポーネントに適用されます