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

Question

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

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

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

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

干杯

- sesshoumaru

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() 的使用是为了避免闪烁。

- davidkonrad