javascript - 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

score 271 · Accepted Answer

ツールチップで使用できますwhite-space:pre-wrap。これにより、ツールチップが新しい行を尊重するようになります。行がコンテナのデフォルトの最大幅よりも長い場合、行は折り返されます。

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

テキストが折り返されないようにする場合は、代わりに次の操作を行います。

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

これらはどちらも\nhtml の a では機能しません。実際には実際の改行でなければなりません。あるいは、エンコードされた newlines を使用できますが、それはおそらく'sを使用するよりも望ましくありません。<br>

score 226 · Accepted Answer

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

score 59 · Accepted Answer

リンク以外の要素でTwitter Bootstrapツールチップを使用している場合は、次のdataパラメーターのみを使用して、Javascript を使用せずに HTML コードで複数行のツールチップを直接指定できます。

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

これは、 costalesの回答の代替バージョンにすぎません。すべての栄光は彼に行きます！:]

score 15 · Accepted Answer

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

たとえば、angular 1.2.10 および angular-ui-bootstrap 0.11 に更新: http://jsfiddle.net/aX2vR/1/

score 2 · Accepted Answer

Angular UI Bootstrap 0.13.X では、tooltip-html-unsafe が廃止されました。tooltip-html と $sce.trustAsHtml() を使用して、html でツールチップを実現する必要があります。

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

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

score 0 · Accepted Answer

Angular Bootstrap の CSS ソリューションは次のとおりです。

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

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

6 に答える 6