• In 2.15.7,
    • Sorry for all of these breaking changes, I should have left this widget in beta.
    • The headerTitle_prefix, headerTitle_text, headerTitle_numeric options has been replaced, in lieu of the new ouput options; sorry for no deprecation notice.
    • Added headerTitle_useAria, headerTitle_tooltip, headerTitle_output_sorted, headerTitle_output_unsorted, headerTitle_output_nosort, headerTitle_cur_text, headerTitle_cur_numeric, headerTitle_nxt_text, headerTitle_nxt_numeric, headerTitle_type & headerTitle_callback options. See the options section below for more details.
    • Added "refreshHeaderTitle" method to force the widget to update.
  • This widget adds a title to the table headers when they are sorted.
  • Click on any header. You may have to move the mouse off, then back on the header to see the title appear.
  • This widget will not work with the original tablesorter plugin (v2.0.5).
  • The examples uses the tipsy jQuery plugin

Demo

Tooltip plugin using togglable aria-label text

: true
First Name
Last Name
Age
Total
Discount
Date
BruceAlmighty45$15.8944%Jan 18, 2001 9:12 AM
BruceEvans22$13.1911%Jul 6, 2006 8:14 AM
ClarkKent22$15.8944%Jan 12, 2003 11:14 AM
JohnEvans33$9.9925%Dec 10, 2002 5:14 AM
PeterParker28$9.9920%Jan 18, 2001 9:12 AM

Tooltip plugin with alternative titles

First Name
Last Name
Age
Total
Discount
Date
BruceAlmighty45$15.8944%Jan 18, 2001 9:12 AM
BruceEvans22$13.1911%Jul 6, 2006 8:14 AM
ClarkKent22$15.8944%Jan 12, 2003 11:14 AM
JohnEvans33$9.9925%Dec 10, 2002 5:14 AM
PeterParker28$9.9920%Jan 18, 2001 9:12 AM

No Tooltip Plugin

First Name
Last Name
Age
Total
Discount
Date
BruceAlmighty45$15.8944%Jan 18, 2001 9:12 AM
BruceEvans22$13.1911%Jul 6, 2006 8:14 AM
ClarkKent22$15.8944%Jan 12, 2003 11:14 AM
JohnEvans33$9.9925%Dec 10, 2002 5:14 AM
PeterParker28$9.9920%Jan 18, 2001 9:12 AM

Javascript

$(function() {

var updateTooltips = function($cell, txt) {
// dynamically update tipsy
if ($cell.is(':hover')) {
$cell
.attr({ title : txt, 'original-title': txt })
// hide, then show the tooltip to force updating & realignment
.tipsy('hide')
.tipsy('show');
}
return txt;
};

$("#table1").tablesorter({
theme : 'blue',
sortList: [[0,0]],
headers : { 4: { sorter: false } },
widgets: ['zebra', 'headerTitles'],
widgetOptions: {
headerTitle_useAria : true,
// add tooltip class
headerTitle_tooltip : 'tooltip',
// manipulate the title as desired
headerTitle_callback : updateTooltips
}
});

// This table is showing all of the headerTitle widget options
$("#table2").tablesorter({
theme : 'blue',
sortList: [[0,0]],
// third click resets the sort
sortReset: true,
headers : { 4: { sorter: false } },
widgets: ['zebra', 'headerTitles'],
widgetOptions: {
// headerTitle_prefix : 'Sort: ', // option has been deprecated
// use aria-label text
// e.g. "First Name: Ascending sort applied, activate to apply a descending sort"
headerTitle_useAria : false,
// add tooltip class
headerTitle_tooltip : 'tooltip',
// custom titles [ "ascending", "descending", "unsorted" ]
headerTitle_cur_text : [ 'Ascending text sort applied', 'Descending text sort applied', 'Currently unsorted' ],
headerTitle_cur_numeric : [ 'Ascending numeric sort applied', 'Descending numeric sort applied', 'Currently unsorted' ],
headerTitle_nxt_text : [ ' apply ascending text sort', ' apply descending text sort', 'remove sort' ],
headerTitle_nxt_numeric : [ ' apply ascending numeric sort', ' apply descending numeric sort', 'remove sort' ],

// title display; {prefix} adds above prefix
// {type} adds the current sort order from above (text or numeric)
// {next} adds the next sort direction using the sort order above
headerTitle_output_sorted : '{current}; activate to {next}',
headerTitle_output_unsorted : '{current}; activate to {next}',
headerTitle_output_nosort : 'No sort available',
// use this type to override the parser detection result
// e.g. use for numerically parsed columns (e.g. dates), but you
// want the user to see a text sort, e.g. [ 'text', '', 'numeric' ]
// use '' (empty string) to use the default
headerTitle_type : ['', '', '', '', '', 'text'],
// manipulate the title as desired
headerTitle_callback : updateTooltips
}
});

// using defaults, no tooltips
$("#table3").tablesorter({
theme : 'blue',
sortList: [[0,0]],
headers : { 4: { sorter: false } },
widgets: ['zebra', 'headerTitles']
});

// add tooltip
$('.tooltip').tipsy({ gravity: 's' });

// switch aria mode
var $state = $('#usearia'),
$table1 = $('#table1'),
// first table only
wo = $table1[0].config.widgetOptions;
$('button').on('click', function(){
wo.headerTitle_useAria = !wo.headerTitle_useAria;
// show current state in demo
$state.text( wo.headerTitle_useAria );
// force headerTitles widget to update
$table1.trigger('refreshHeaderTitle');
});

});