How to create a tooltip for the filter widget of the JQuery tablesorter plugin?

Question

Possibly related question: jquery tablesorter add title/tooltip to show ascending/descending

Below is HTML that I tried:

<table class="tablesorter" id="table1">
     <thead>
         <tr>
             <th title="this is title for the header" data-title="I want this to be title for the filter">Column1</th>
             <th title="this is title for the header" data-title="I want this to be title for the filter">Column2</th>
         </tr>
     </thead>
     <tbody>
         <tr><td>1</td><td>2</td></tr>
         <tr><td>3</td><td>4</td></tr>
     </tbody>
 </table>

And the JS:

$('#table1').tablesorter({
    theme : 'ice',
    cssInfoBlock : 'tablesorter-no-sort',
    widgets: ['zebra', 'stickyHeaders', 'filter']
});

The title portion works. What I do not gte is a mouseover text over the filter text box. I do not want to intercept those events manually.

Answer 1

It might be better to add a placeholder to the filter using a data-placeholder attribute on the table header (demo)

<th data-placeholder="Search Alphanumeric">AlphaNumeric</th>

But if you truly want a tooltip to appear, then try this code (demo):

HTML

<th data-filter-title="Search Alphanumeric">AlphaNumeric</th>

Script

$('table')
    .on('filterInit', function() {
        var c = this.config;
        c.$headers.each(function(i){
            c.$filters.eq(i).attr( 'title', $(this).attr('data-filter-title') );
        });
    })
    .tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter']
    });