Tooltips and tooltips

Question

I am adding datatables to my Rails application. It works for me for the most part, but I'm stuck in 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 displays:

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

In a data-free table, a tooltip for bootstrap works fine, but doesn't work in datatable. From experience, I collect it because the datatable is displayed 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 assume this is a tooltip compared to the bootstrap tooltip:

Forget the contents of the tooltip - formatting problem, etc. The non-bootstrap tooltip also takes longer to disappear.

, ?

,

Dan

Answer 1

, selector:

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

popovers.

Answer 2

drawCallback , DataTables .

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

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

// add as many tooltips you want

},
});