jquery tablesorter add title/tooltip to show ascending/descending

Question

I am using jquery tablesorter. I have a table like the one here:

http://tablesorter.com/docs/

Except I want the column headers to each have a title/tooltip when

Answer 1

This is how I would do it... set up a data-title for each header cell with the text you want to add. But instead of saying "by", "ascending" or "descending", we'll use a replacable variable named "{dir}" for direction:

<table class="tablesorter">
     <thead>
         <tr>
             <th data-title="sort {dir} last name">Last</th>
             <th data-title="sort {dir} first name">First</th>
         </tr>
     </thead>
     <tbody>
         <tr><td>Smith</td><td>John</td></tr>
         <tr><td>Jones</td><td>Timothy</td></tr>
         <tr><td>Wong</td><td>Jin</td></tr>
         <tr><td>O'Brien</td><td>Shaun</td></tr>
         <tr><td>Parker</td><td>Peter</td></tr>        
     </tbody>
 </table>

Then we add a function to go through each table header cell and update the title based on what class name it finds. Call it, and also make sure it is called after each table sort has completed.

var table = $('table'),

    updateTitles = function(){
        var t, $this;
        table.find('thead th').each(function(){
            $this = $(this);
            t = "by";
            if ($this.hasClass('headerSortUp')) {
                t = "ascending";
            } else if ($this.hasClass('headerSortDown')) {
                t = "descending";
            }
            $this.attr('title', $this.attr('data-title').replace(/\{dir\}/, t) );
        });
    };

table.tablesorter();

// bind to sort events 
table.bind("sortEnd",function() { 
    updateTitles(); 
});
// set up titles
updateTitles();

Here is aworking demo.