title: Datatables and bootstrap tooltips
body: <p>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:</p>
  
  <pre><code>content_tag(:abbr, "#{record.od} mm", data: { container: 'body', toggle: 'tooltip', placement: 'bottom', html: 'true' }, title: 'test' )
  </code></pre>
  
  <p>which renders:</p>
  
  <pre><code>&lt;abbr data-container="body" data-toggle="tooltip" data-placement="bottom" data-html="true" title="test"&gt;88.9 mm&lt;/abbr&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>After some digging I tried this:</p>
  
  <pre><code>$ -&gt;
    $('#table').dataTable
      ajax: 
        url: myurl
      processing: true
      serverSide: false
      responsive: true
      'fnCreatedCell': (nTd, sData, oData, iRow, iCol) -&gt;
        $(nTd "abbr").tooltip()
  </code></pre>
  
  <p>This almost works... almost because I get a tooltip but I am guessing it's a datatable tooltip vs the bootstrap tooltip:</p>
  
  <p><a href="https://i.stack.imgur.com/qSdrV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qSdrV.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/q22IE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/q22IE.png" alt="enter image description here"></a></p>
  
  <p>Forget the tooltip content - the formatting etc. is the issue.  The non-bootstrap tooltip also takes way longer to fade in.</p>
  
  <p>Is there perhaps an easy fix here?</p>
  
  <p>Thanks,</p>
  
  <p>Dan</p>