Tooltip is not working on datatable

Question

Thanks for looking into my trouble.

I've look at many related topic on this subject, tried many solution but it still didn't solve my problem.

I have a generated DataTable, and I want some customize Tooltips to appear on cells. To make it short and simple, let's assume I just want <i>italics</i> to shows up on tr markup.

This is what I actually have after many change:

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.2.3 -->
<script src="/miscellaneous/adminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/miscellaneous/adminLTE/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/miscellaneous/adminLTE/dist/js/app.min.js"></script>    
<!-- Data Tables -->
<script src="/miscellaneous/bov2/js/jquery.dataTables.min.js"></script>
<script src="/miscellaneous/bov2/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="/miscellaneous/adminLTE/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/miscellaneous/adminLTE/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/miscellaneous/adminLTE/dist/js/demo.js"></script>
<!-- page script -->
<script>
    $(document).ready(function () {

        /* Init DataTables */
        $('#example').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "{{ path('tableUserAjax') }}",
                "type": "POST",
                "dataType": "json",
            },
            "columns": [
                {"data": "login"},
                {"data": "name"},
                {"data": "date"},
                {"data": "language"},
                {"data": "group"},
                {"data": "role"},
                {"data": "valid"}],
            "fnDrawCallback": function (oSettings) {
                $('#example tbody tr').each(function () {
                    var sTitle;
                    var nTds = $('td', this);
                    var s0 = $(nTds[0]).text();
                        sTitle = "<h1>" + s0 + "</h1>";
                        this.setAttribute('rel', 'tooltip');
                    this.setAttribute('title', sTitle);
                });
            }
        });
        /* Apply the tooltips */
        $('#example').tooltip({
            html : true,
            /* i tried this : content: "<b>Bold</b>, <i>Italic</i>",*/
        });
    });
</script>

And here is my HTML table (with one ligne to keep it simple):

<table class="table table-bordered table-hover dataTable no-footer" id="example" role="grid" style="width: 1163px;" data-original-title="" title="">
    <thead>
        <tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 96.2px;"
            aria-sort="ascending" aria-label="Login: activate to sort column descending">Login
            </th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 176.2px;"
            aria-label="Name: activate to sort column ascending">Name
            </th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 201.2px;"
            aria-label="Date: activate to sort column ascending">Date
            </th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 145.2px;"
            aria-label="Language: activate to sort column ascending">Language
            </th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 102.2px;"
            aria-label="Group: activate to sort column ascending">Group
            </th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 83.2px;"
            aria-label="Role: activate to sort column ascending">Role
            </th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 88px;"
                aria-label="Valid: activate to sort column ascending">Valid
            </th>
        </tr>
    </thead>
    <tbody>
        <tr role="row" class="odd" rel="tooltip" title="&lt;h1&gt;Aaron&lt;/h1&gt;">
            <td class="sorting_1">Aaron</td>
            <td>Aaron MARTIN</td>
            <td>30 mars 2016</td>
            <td>English</td>
            <td>Marketing</td>
            <td></td>
            <td>0</td>
        </tr>
    </tbody>
</table>

Shouldn't this work?

Epsomite

Answer 1

SO, based on proposition, I found out that the probleme came from the ajax DataTable (which reload the html and make it loose every associated function declared, included the tooltip one.

My final solution is to add the tooltip in the fnDrawCallback parameter. See below:

<script>

    $(document).ready(function () {

        /* Init DataTables */
        $('#example').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "{{ path('tableUserAjax') }}",
                "type": "POST",
                "dataType": "json",
            },
            "columns": [
                {"data": "login"},
                {"data": "name"},
                {"data": "date"},
                {"data": "language"},
                {"data": "group"},
                {"data": "role"},
                {"data": "valid"}],
            "fnDrawCallback": function (oSettings) {
                $('#example tbody tr').each(function () {
                    var sTitle;
                    var nTds = $('td', this);
                    var s0 = $(nTds[0]).text();
                    var s1 = $(nTds[1]).text();
                    var s2 = $(nTds[2]).text();
                    var s3 = $(nTds[3]).text();
                    var s4 = $(nTds[4]).text();
                    var s5 = $(nTds[5]).text();

                    sTitle = "<h1>"+s0+"</h1>";

                    this.setAttribute('rel', 'tooltip');
                    this.setAttribute('title', sTitle);
                    console.log(this);
                    console.log($(this));
                    $(this).tooltip({
                        html: true
                    });
                });
            }
        });

    });

</script>

Epsomite

I applied your solution for tippy and it worked fine. – Miry

Answer 2

This will set it globally for all datatables

        $( document ).ajaxComplete(function() {
            // Required for Bootstrap tooltips in DataTables
            $('[data-toggle="tooltip"]').tooltip({
                "html": true,
                "delay": {"show": 1000, "hide": 0},
            });
        });

Drosophila

Answer 3

If what you want is to add HTML to a specific cell, you could make use of the render function in the columns definition:

"columns": [
            {"data": "login"},
            {"data": "name",
                "render": function(data,type,full){
                      if(type==='display'){
                           return '<i>'+data+'</i>'
                      }
                      return data;
                 }
            },
            {"data": "date"},
            {"data": "language"},
            {"data": "group"},
            {"data": "role"},
            {"data": "valid"}],

In this example, the data corresponding to "name" would be in italics. If you wish to have a tooltip, just replace the <i> tag with, for instance, a <span title='tooltip'> tag. Be sure to check the render docs for more info!

If what you want is a tooltip in each cell, replace drawCallback with [rowCallback][2]. drawCallback gets called each time the table is (re)drawn (when filtering, ordering, at initialization, etc). RowCallback gets called when datatables generates a row.

Inject

I guess it would work, and i will propose it as well as a solution. I found another solution : add the tooltip in the fnDrawCallback parameter. Because the ajax from DataTable reload the HTML and make it loose every associated function – Epsomite

mmm that's weird, rowCallback should work when reloading too, IIRC – Inject

Answer 4

You can use this:

table.cells().every( function () {

        $(this.node()).tooltip({
                 html : true,
                 content: "<b>Bold</b>, <i>Italic</i>",
             });
});

Where table = $('#example').DataTable(....);

Fairbanks

I tried it. It seems the problem came from html being regenerated by ajax and it loose every associated function. Solution was to add the tooltip in the fnDrawCallback parameter. Your solution works if i do it :) – Epsomite

Answer 5

use $('[data-toggle="tooltip"]').tooltip(); in "fnDrawCallback": function()

<script>
    $(document).ready(function() {

        var selected = [];
        $('#example').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": "data.php",
            info:true,
            "fnDrawCallback": function() {
                jQuery('.toggle-demo').bootstrapToggle();
                $('[data-toggle="tooltip"]').tooltip();

            },
            "fnCreatedRow": function( nRow, aData, iDataIndex ) {
                $(nRow).attr('id','row_'+ aData[4]);
            },

            aLengthMenu: [ 10,25, 50, 100,-1], 
        } );
    } );



</script>

Spermine