在表格單元格上使用引導程序的複雜html工具提示

Question

我想在顯示覆雜的HTML工具提示時將鼠標懸停在表格單元格上（我們稱之爲outer table）。 複雜的HTML工具提示是另一個表（我們稱之爲inner table）。 實際的內部表在運行時正在構建，但對於示例，我將使用靜態HTML。 我已經設置了外部表格單元格是這樣的：

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

和鼠標懸停事件：

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

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

} 

工具提示彈出式廣告，但沒有解析文本作爲HTML。 我做錯了什麼？

Answer 1

您正在初始化每個鼠標懸停的工具提示更好地初始化一次查看下面的代碼snipset。

而不是這個

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

要

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

&你的HTML標記應該是

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

在靜態HTML內容上面的代碼工作情況。

在以下代碼有用

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

需要附加動態數據之後初始化工具提示動態內容案例。

&需要更改動態內容的標題屬性。

$(document).on('mouseover','#myTable td', function() { 
    var dyanmicContent = 'Hello World'; 
    $(this).attr("title", "<table><tr><td>" + dyanmicContent + "</td></tr></table>") 
}