web-dev-qa-db-ja.com

Twitter 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
javascriptcsstwitter-bootstrap
149
Matthew Hui

ツールチップで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/

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

253
Chad von Nau

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

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

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

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

52
trejder

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

例えばangular 1.2.10およびangular-ui-bootstrap 0.11への更新： http://jsfiddle.net/aX2vR/1/

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

16
chakming

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

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

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

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

0
Antonis