All,
I am trying to get JQueryUI tooltip and Tablesorter plugin to work together. I am unable to display the JQueryUI tooltip when I hover on the names but the tooltip won't appear after I click the "Reset Sort Order" link.
How can I make sure the tooltip is displayed after I click the "Reset Sort Order" link. The tooltip should also be displayed when the table is sorted or paged.
A demo of the code can be seen at: http://jsbin.com/asaxi3/32/
The code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" type="text/css" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css">
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.js"></script>
<script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
</head>
<body>
<div id="main">
<table id="table1" cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" title="I am Student01">Student01</a></td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td><a href="#" title="I am Student02">Student02</a></td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td><a href="#" title="I am Student03">Student03</a></td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td><a href="#" title="I am Student04">Student04</a></td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td><a href="#" title="I am Student05">Student05</a></td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td><a href="#" title="I am Student06">Student06</a></td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student07</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student08</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student09</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student10</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student11</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student12</td>
<td>Mathematics</td>
<td>female</td>
</tr>
<tr>
<td>Student13</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student14</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td><a href="#" title="I am Student15">Student15</a></td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student16</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td><a href="#" title="I am Student17">Student17</a></td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td><a href="#" title="I am Student18">Student18</a></td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student19</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student20</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student21</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student22</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student23</td>
<td>Languages</td>
<td>female</td>
</tr>
</tbody>
</table>
<div id="pager1" class="pager">
<form>
<a href="javascript:resetTableOrder(tablebackup)">Reset Sort Order</a>
<img src="http://tablesorter.com/addons/pager/icons/first.png" class="first"/>
<img src="http://tablesorter.com/addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="http://tablesorter.com/addons/pager/icons/next.png" class="next"/>
<img src="http://tablesorter.com/addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
<script type="text/javascript">
$(function() {
$("#table1 a").tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
tablebackup = $("#table1").clone();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
});
function resetTableOrder(tablebackup) {
tablebackup.clone().insertAfter("#table1");
$("#table1").remove();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
//Load Tool Tips for links inside the tab container
$("#table1 a").tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
}
</script>
</div>
</body>
</html>
Thanks
When you initialize tooltip the first time, it removed the title attribute from the tag. Then when the table is refreshed, it cannot find the title tag for each link and therefore skips it. I would recommend caching the title tags so when you reinitialize the tooltip, you can reinsert the original title tags.
var tableTitles;
$(function() {
tableTitles = $("#table1 a").attr("title");
$("#table1 a").tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
tablebackup = $("#table1").clone();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
});
function resetTableOrder(tablebackup) {
tablebackup.clone().insertAfter("#table1");
$("#table1").remove();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
//Load Tool Tips for links inside the tab container
$("#table1 a").attr("title", tableTitles).tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
}
Here is the working version: http://jsbin.com/asaxi3/36