每个单元格具有自定义工具提示的数据表

Question

我想为我的桌面自定义工具提示，并使用以下示例：

https://datatables.net/beta/1.9/examples/advanced_init/events_post_init.html

我复制了CSS和JS工具提示文件，但我的工具提示看起来像是默认文件。

如何自定义工具提示？你有例子吗？

干杯

Answer 1

真的没有什么花哨的。鼠标显示一些内容后，它只是<div>。您可以使用其中一个zillion工具提示/ popover插件，或者您可以自己完成。下面是一个示例，显示“工具提示”中悬停行的内容：

#tooltip {
  position: absolute;
  z-index: 1001;
  display: none;
  border: 2px solid #ebebeb;
  border-radius: 5px;
  padding: 10px;
  background-color: #fff;
}

事件处理程序

$('#example').on('mousemove', 'tr', function(e) {
   var rowData = table.row(this).data().join(',')
   $("#tooltip").text(rowData).animate({ left: e.pageX, top: e.pageY }, 1)
   if (!$("#tooltip").is(':visible')) $("#tooltip").show()
})
$('#example').on('mouseleave', function(e) {
  $("#tooltip").hide()
})  

演示 - ＆gt;的 http://jsfiddle.net/0g2axdt5/

使用animate()是为了避免闪烁。