CODEWITHSUNDEEP
jquerydatatablesjquery-ui-tooltip
Florent Cardot
Florent Cardot

Reputation: 1418

Tooltip is not working on datatable

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?

Upvotes: 7

Views: 21422

Answers (5)

alixcol
alixcol

Reputation: 69

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>

Upvotes: 1

Vlad Tokarskiy
Vlad Tokarskiy

Reputation: 121

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

Upvotes: 12

Florent Cardot
Florent Cardot

Reputation: 1418

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>

Upvotes: 7

Sebastianb
Sebastianb

Reputation: 2060

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.

Upvotes: 2

MoustafaS
MoustafaS

Reputation: 2031

You can use this:

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

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

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

Upvotes: 1

Related Questions