Tippy.js working for part of the rows for a column only

bhaulik

I am implementing a tooltip using Tippy.js and calling it in after the initialization of the table, and only part of the table rows have a tooltip (particularly the first ones), the remaining do not. What could the possible reason be for the partial rows to show the tooltip while the rest do not show any? (is it that datatables renders the rows partly each time, note: my table deferRender: true)

bhaulik

Edit: just found the solution. Apparently I have to call the 'drawCallback' and then call the function so that everytime the table draws the rows the tooltip is added for that part.

allan

My guess is the second FAQ here. But we'd really need a test case as requested in the forum rules to be sure.

Allan

gyrocode

Using drawCallback is not ideal since it may be called multiple times for the same page.

It may be better to use createdRow instead.

Please see jQuery DataTables: Custom control does not work on second page and after for more details.

---

See more articles about jQuery DataTables on gyrocode.com.

bhaulik

The following worked fine and is more efficient
.
.
.
var table = $('#example').DataTable( {
'createdRow': function(settings){
tippy('.myclass', {
duration: [10, 10],
})
}
} );