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

Question

我想为我的表格自定义工具提示，我使用了以下示例：

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

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

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

干杯

Answer 1

真的，这没什么特别的。它只是<div>跟随鼠标显示一些内容。您可以使用无数的工具提示/弹出窗口插件之一，也可以自己完成。下面是一个显示“工具提示”中悬停行内容的示例：

#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()
})  

演示 -> http://jsfiddle.net/0g2axdt5/

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