Tooltip for pagination buttons in DataTables

Question

I have a datatable where I have to show the tooltip on every row and in the pagination buttons as well. I have implemented the tooltip option for the rows wherever required, but not able to figure out that how do we set the tooltip for the controls like pagination buttons (Prev and Next buttons), search (textbox) and sort (dropdown) in datatables.

HTML:

      

   
        
            Name
            Position
            Office
            Age
            Start date
            Salary
        
    

    
        
            Tiger Nixon
            System Architect
            Edinburgh
            61
            2011/04/25
            $320,800
        
        
            Garrett Winters
            Accountant
            Tokyo
            63
            2011/07/25
            $170,750
        
        
            Ashton Cox
            Junior Technical Author
            San Francisco
            66
            2009/01/12
            $86,000
        
        
            Cedric Kelly
            Senior Javascript Developer
            Edinburgh
            22
            2012/03/29
            $433,060
        
        
            Airi Satou
            Accountant
            Tokyo
            33
            2008/11/28
            $162,700
        
        
            Brielle Williamson
            Integration Specialist
            New York
            61
            2012/12/02
            $372,000
        
        
            Herrod Chandler
            Sales Assistant
            San Francisco
            59
            2012/08/06
            $137,500
        
        
            Rhona Davidson
            Integration Specialist
            Tokyo
            55
            2010/10/14
            $327,900
        
        
            Colleen Hurst
            Javascript Developer
            San Francisco
            39
            2009/09/15
            $205,500
        
        
            Sonya Frost
            Software Engineer
            Edinburgh
            23
            2008/12/13
            $103,600
        
        
            Jena Gaines
            Office Manager
            London
            30
            2008/12/19
            $90,560
        
        
            Quinn Flynn
            Support Lead
            Edinburgh
            22
            2013/03/03
            $342,000
        
        
            Charde Marshall
            Regional Director
            San Francisco
            36
            2008/10/16
            $470,600

JS:

$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
});
$('#example').dataTable({ 
bJQueryUI: true,
retrieve: true,
    "sPaginationType": "full_numbers"}).makeEditable({"aoColumns": [
{   
    cssclass: "required" 
},
{
    cssclass: "required"
},
{
    indicator: 'Saving...',
    tooltip: 'Click to edit',  //tooltip for row
    type: 'text',
    submit:'Save'
},
{
    indicator: 'Saving...',
    tooltip: 'Click to enter age',  //tooltip for row
    loadtext: 'loading...',
    type: 'select',
    onblur: 'submit', 
    data: "{'':'Select', 'A':60,'B':12,'C':23,'D':25,'E':65}"
},
{
    indicator: 'Saving...',
    tooltip: 'Click to select',  //tooltip for row
    loadtext: 'loading...',
    type: 'select',
    onblur: 'submit',
    data: "{'':'Select...', 'A':'A','B':'B','C':'C'}"
},
{   cssclass: "required" }
]
});      
});

Here is the JSFiddle for the same. Any help would be appreciated.

davidkonrad · Accepted Answer

By tooltip I guess you mean titles? For some peculiar reason, this is not part of the native API. In my opinion, it would be obvious to include title / tooltips-options in the language construct ...

$('.paginate_button').each(function() {
    var text = $(this).text(),
        title = isNaN(text) ? text+' page' : 'Page '+text;
    $(this).attr('title', title);
});

Will set title on the pagination buttons, as "Previous page", "Page 3" etc.

$('.dataTables_filter input').attr('title', 'Type here to search in the table');

$('.dataTables_length select').attr('title', 'Select number of visible rows');

– for filter / search box and the length menu.

Place the above inside a draw.dt event so title for the control elements is updated each time the table is redrawn :

table.on('draw.dt', function() {
    $('.paginate_button').each(function() {
          var text = $(this).text(),
            title = isNaN(text) ? text+' page' : 'Page '+text;
        $(this).attr('title', title);
    });
    $('.dataTables_filter input').attr('title', 'Type here to search in the table');
    $('.dataTables_length select').attr('title', 'Select number of visible rows');
})

Tooltip for pagination buttons in DataTables

Answers (2)

Related Questions