テーブルセルに複雑なhtmlのブートストラップのツールチップを使用する

Question

テーブルセルをホバーするたびに複雑なHTMLツールチップを表示したい（outer tableと呼ぶ）。 複雑なHTMLツールチップは別のテーブルです（inner tableと呼ぶ）。 実際の内部テーブルは実行時にビルドされていますが、例では静的なHTMLを使用します。 私はこのように、外側のテーブルセルを設定している：

<td data-toggle="tooltip" data-html="true" data-placement="bottom"></td> 

とmouseoverイベント：

$(#myTable td).on("mouseover", function() { 

    $(this).attr("title", "<table><tr><td>some tooltip</td></tr></table>") 
    $(this).tooltip({html: true}); 

} 

ツールヒントのポップアップが、HTMLとしてテキストを解析せずに。 私は何が間違っていますか？

Answer 1

すべてのマウスオーバーのツールチップを初期化しています。一度初期化することをお勧めします。次のコードスニペットを見てください。これに代えての

$(this).tooltip({html: true}); 

$('td[data-toggle="tooltip"]').tooltip({html: true}); 

&ためにあなたのHTMLマークアップは、コードの仕事上の静的なHTMLコンテンツの場合

<td data-toggle="tooltip" title="<table><tr><td>some tooltip</td></tr></table>" data-placement="bottom"></td> 

をする必要があります。

動的データを付加した後にツールチップを初期化に必要なコード下動的コンテンツ有用

$('td[data-toggle="tooltip"]').tooltip({html: true}); 

の場合。

&動的コンテンツのタイトル属性を変更する必要があります。