Display JQuery UI Tooltip after table reset_问答_开发者

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>&nbsp;
    <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

Vincent, it's looking good. Seems like you're on the right track.

I was on a similar project and found that the entire thing seemed much easier and more feature rich when I switched over go Qtip and Datatables. The switch from the exact solution you're using to the new scripts gave my app night and day difference in functionality and useability...and the changeover was quick.

Here's links to the other tools: Qtip: http://craigsworks.com/projects/qtip/ Datatables: http://datatables.net/

The sorting and searching features alone on Datatables make it a must see.

Good luck!