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?

Answer 1

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},
            });
        });

Answer 2

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>