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:

<div class="container">      
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
   <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

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

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.

Answer 1

Please, consider use titleAttr:, example:

                    "buttons": [
                        {
                            extend: 'pageLength',
                            className: 'pageLength',
                            titleAttr: 'Search',
                            text: '<i class="fa fa-search fa-lg text-success"></i>'
                        },
                        {
                            extend: 'copy',
                            titleAttr: 'Copy to clipboard',
                            className: 'copyButton',
                            text: '<i class="fa fa-clone fa-lg text-success"></i>'
                        },
                        {
                            extend: 'excel',
                            titleAttr: 'Copy to excel file',
                            text: '<i class="fa fa-file-excel-o fa-lg text-success"></i>'
                        },
                        {
                            extend: 'pdf',
                            titleAttr: 'Copy pdf file',
                            text: '<i class="fa fa-file-pdf-o fa-lg text-success"></i>'
                        },
                        {
                            extend: 'csv',
                            titleAttr: 'Copy to csv file',
                            text: '<i class="fa fa-file-excel-o fa-g text-success"></i>'
                        },
                        {
                            extend: 'print',
                            titleAttr: 'Print the results',
                            title: '',
                            exportOptions: {
                                columns: ':visible',
                                stripHtml: false,
                            },
                            text: '<i class="fa fa-print fa-lg text-success"></i>',
                            customize: function (win) {
                                $(win.document.body)
                                    .css('font-size', '10pt')
                                    .prepend(
                                        '<img src="" style="position:absolute; top:0; left:0;" />'
                                    );

                                $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('font-size', 'inherit');
                            }
                        },
                    ]

Answer 2

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