在表格单元格上使用带有复杂 html 的引导工具提示答案

【问题标题】：Use bootstrap's tooltip with complex html on a table cell在表格单元格上使用带有复杂 html 的引导工具提示
【发布时间】：2017-11-05 05:33:10
【问题描述】：

我想在悬停表格单元格时显示复杂的 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。我做错了什么？

【问题讨论】：

标签： jquery html twitter-bootstrap

【解决方案1】：

您正在初始化每次鼠标悬停的工具提示最好初始化一次查看以下代码片段。

不是这个

$(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});

添加动态数据后需要初始化tooltip。

&需要改变动态内容的title属性。

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

【讨论】：

但是动态数据附加在每个“鼠标悬停”事件上，所以如果我想在设置内容后初始化工具提示，它必须在“鼠标悬停”事件内。我尝试了您的解决方案，但仍然没有用....
如果有人可以建议使用一个很好的 jquery 插件来处理复杂的 html 工具提示，那也可以