datatables with custom tooltip per cell

Question

I would like to customize my tooltip for my table and I used the following example :

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

I copied CSS and JS tooltip file but my tooltip look like a default one.

How can I customize my tooltip ? Do you have examples ?

Cheers

Solution

There is nothing fancy about it, really. It is just a <div> following the mouse showing some content. You can use one of the zillion tooltip / popover plugins out there, or you can do it by yourself. Here is an example showing the content of a hovered row in a "tooltip" :

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

event handlers

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

demo -> http://jsfiddle.net/0g2axdt5/

The use of animate() is to avoid flicker.