Demo
Tooltip plugin using togglable aria-label text
: trueFirst Name | Last Name | Age | Total | Discount | Date |
---|---|---|---|---|---|
Bruce | Almighty | 45 | $15.89 | 44% | Jan 18, 2001 9:12 AM |
Bruce | Evans | 22 | $13.19 | 11% | Jul 6, 2006 8:14 AM |
Clark | Kent | 22 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
John | Evans | 33 | $9.99 | 25% | Dec 10, 2002 5:14 AM |
Peter | Parker | 28 | $9.99 | 20% | Jan 18, 2001 9:12 AM |
Tooltip plugin with alternative titles
First Name | Last Name | Age | Total | Discount | Date |
---|---|---|---|---|---|
Bruce | Almighty | 45 | $15.89 | 44% | Jan 18, 2001 9:12 AM |
Bruce | Evans | 22 | $13.19 | 11% | Jul 6, 2006 8:14 AM |
Clark | Kent | 22 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
John | Evans | 33 | $9.99 | 25% | Dec 10, 2002 5:14 AM |
Peter | Parker | 28 | $9.99 | 20% | Jan 18, 2001 9:12 AM |
No Tooltip Plugin
First Name | Last Name | Age | Total | Discount | Date |
---|---|---|---|---|---|
Bruce | Almighty | 45 | $15.89 | 44% | Jan 18, 2001 9:12 AM |
Bruce | Evans | 22 | $13.19 | 11% | Jul 6, 2006 8:14 AM |
Clark | Kent | 22 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
John | Evans | 33 | $9.99 | 25% | Dec 10, 2002 5:14 AM |
Peter | Parker | 28 | $9.99 | 20% | 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');
});
});