Question

每当我将表格单元格悬停时，我想显示复杂的HTML工具提示（我们称之为inner table）。复杂的HTML工具提示是另一个表（让我们称之为<td data-toggle="tooltip" data-html="true" data-placement="bottom"></td>）。实际的内部表是在运行时构建的，但是对于该示例，我将使用静态HTML。我已经设置了外表格单元格：

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

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

}

和鼠标悬停事件：

 alter table sales_agreement modify column client_id int(11)  auto_increment ;

工具提示会弹出，但不会将文本解析为HTML。我做错了什么？

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

需要在追加动态数据后初始化工具提示。

＆安培;需要更改动态内容的标题属性。

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

在表格单元格上使用bootstrap的工具提示和复杂的html

1 个答案: