troubleshooting Question

How do display a styled tooltip for a <tr>s in a HTML5/JQUERY table using jquery.tools.js?

Avatar of jxbma
jxbmaFlag for United States of America asked on
JavaScriptHTMLjQuery
8 Comments1 Solution6019 ViewsLast Modified:
Hi:

I'm trying to create some stylish tooltips using jquery.tools.js.

I have a table defined in html as follows:
<table>
 <tbody>
   <tr class="rowData"> 
   <td class="columnPublisher">Publisher</td>
   <td class="columnField1">Field 1</td>
   <td class="columnField2">Field 2</td>                                
   <td class="columnField3">Field 3</td>
   <td class="columnField4">Field 4</td>
 </tr>
</tbody>
</table>


I would like to display the following html as a tooltip:
<!-- tooltip element -->
<div id="toolTipDetails" class="tooltip">
  <table style="margin:0">
    <tr>
      <td class="label">Publication</td>
      <td>Some Old Book</td>
    </tr>
    <tr>
      <td class="label">Other Data</td>
      <td>Automotive</td>
      <td class="label">Other Data1</td>
      <td>SUV Repair</td>
    </tr>
    <tr>
      <td class="label">Age</td>
      <td>45</td>
      <td class="label">Gender</td>
      <td>Male</td>            
    </tr>
  </table>
</div>

After looking at a couple of different options, I decided on using the tooltip from jquery.tools.js. Initially, I had to work through some naming collisions with other jquery libraries. I've resolved those, but I still can't seem to get this to work.

I need to be able to detect the row I'm on and display supplemental data (related to that row) within the tooltip.

Can someone walk me through this using the sample table and tooltip I've included.

If this is not possible, can you recommend another approach to this.
I do not want to modify the table so that supplemental information is in a sub-table.
I would really like to achieve this through a tooltip.

Thanks,
JohnB
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 8 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros