Datatables and bootstrap tooltips

Question

I am adding Datatables to my Rails app. I have it working for the most part but I am stuck on a CSS / jQuery issue. I have a row cell defined as follows:

content_tag(:abbr, "#{record.od} mm", data: { container: 'body', toggle: 'tooltip', placement: 'bottom', html: 'true' }, title: 'test' )

which renders:

<abbr data-container="body" data-toggle="tooltip" data-placement="bottom" data-html="true" title="test">88.9 mm</abbr>

In a non-datatable table the bootstrap tooltip works fine but fails on the datatable. From experience I gather it's because the datatable is rendered after the body completes etc.

After some digging I tried this:

$ ->
  $('#table').dataTable
    ajax: 
      url: myurl
    processing: true
    serverSide: false
    responsive: true
    'fnCreatedCell': (nTd, sData, oData, iRow, iCol) ->
      $(nTd "abbr").tooltip()

This almost works... almost because I get a tooltip but I am guessing it's a datatable tooltip vs the bootstrap tooltip:

Forget the tooltip content - the formatting etc. is the issue. The non-bootstrap tooltip also takes way longer to fade in.

Is there perhaps an easy fix here?

Thanks,

Dan

Answer 1

As mentioned in the comments, you can use the selector option:

$('body').tooltip({selector: '[data-toggle="tooltip"]'});

This works for popovers too.

Answer 2

You need to use drawCallback to initialize tooltips every time DataTables redraws the table.

var table = $('#example').DataTable( {  
"drawCallback": function( settings ) {

$('[data-toggle="tooltip1"]').tooltip();
$('[data-toggle="tooltip2"]').tooltip();

// add as many tooltips you want

},
});