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:

     

         

             
Last
             
First
         
     
     

         
Smith
John
         
Jones
Timothy
         
Wong
Jin
         
O'Brien
Shaun
         
Parker
Peter
        
     
 

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.