datatables with custom tooltip per cell - datatables

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

Answer 1

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.