Search code examples
javascriptcssdatatables

How do I style datatable tooltips?

I am using datatables for my project and I am using hidden column to display tooltips. Is there a way I can style them? Maybe add some animation to it. Right now, the tool tip looks default. I want to make it interesting for the user. Here is my code . Thanks.

$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: false,
paging: false,
scrollX: true,
scrollCollapse: true,
lengthChange: false,
searching: true,
ordering: false,
columnDefs: [{
      targets: 2, visible: false
    }],
    rowCallback: function(row, data, displayNum, displayIndex, dataIndex) {
      $(row).attr('title', data[2]);
    }
} );
} );
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>

  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>

<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
  <th>&#160;</th>
</tr>


          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Hidden Column</th>
          </tr>
        </thead>

        
        <tbody>
          <tr>
            <td>ID.AI</td>
            <td><p>System: Architectghhghjjkjukjkj<p></td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>Sys Architect</td>
          </tr>
          <tr>
            <td>Garrett -2</td>
            <td><p>Director: fgghghjhjhjhkjkj<p></td>
            <td>Edinburgh</td>
            <td></td>
            <td>2011/07/25</td>
            <td>$5,300</td>
            <td>Director:</td>
          </tr>
          <tr>
            <td>Ashton.1 -2</td>
            <td><p>Technical Authorjkjkjk fdfd h gjjjhjhk<p></td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
            <td></td>
          </tr>
          
            
          </tr></tbody></table>
</div>

Solution

  • Like Adam says above you can not style the default behaviour of the title attribute in HTML. What you can do is implement something like the tooltips of Bootstrap. That would look something like this:

    $(document).ready(function() {
  $('#my-table').DataTable({
    // ...
    createdRow: function(row, data, dataIndex) {
      var title = data[2];
      $(row).attr('title', title);

      if (title !== undefined && title !== '') {
        $(row).find('td').each(function(index, td) {
          $(td).attr('data-toggle', 'tooltip');
          $(td).attr('data-placement', 'top');
        });
      }
    },

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