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

I'd perhaps add a class to the tooltip (such as `tooltip`) and then call the tooltip function in the draw callback. I little like this answer: http://stackoverflow.com/questions/39189856/datatables-with-eonasdan-datepicker-doesnt-work/39191075#39191075 — annoyingmouse, Aug 31 '16 at 06:42
Try using delagation: http://stackoverflow.com/questions/9958825/how-do-i-bind-twitter-bootstrap-tooltips-to-dynamically-created-elements — thirtydot, Aug 31 '16 at 08:00
$('body').tooltip selector: '[data-toggle="tooltip"]' did the trick. If you add this as an actual answer I will accept it. — Dan Tappin, Aug 31 '16 at 14:03

score 33 · Accepted Answer · answered Apr 28 '17 at 04:30

33

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

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

This works for popovers too.

answered Apr 28 '17 at 04:30

mgalgs

15,671
11
61
74

score 22 · Answer 2 · answered Jun 04 '17 at 15:37

22

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

},
});

answered Jun 04 '17 at 15:37

learnplus

249
3
6

2

This worked for me, but I just used run `.tooltip()` on `[data-toggle="tooltip"]` once (as opposed to creating many toggles for each tooltip and it seemed to work perfectly. – Alex Alifimoff Dec 08 '17 at 20:54
I changed responsive = false, xscroll=true, but it is blinking continuously why I don't know. please tell me – Kumaresan Perumal Aug 19 '19 at 06:55

score 3 · Answer 3 · answered Nov 23 '20 at 15:43

3

only this worked for me

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

answered Nov 23 '20 at 15:43

Muflix

6,192
17
77
153

Datatables and bootstrap tooltips

3 Answers3