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

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>

Open in new window



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>

Open in new window


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
LVL 1
jxbmaSoftware ConsultantAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Is this the one you are using http://jquerytools.org/demos/tooltip/index.html ?
0
jxbmaSoftware ConsultantAuthor Commented:
Yes, this is what I'm attempting to use.

Thanks,
JB
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Did you happen to catch q-tip in your search?  http://qtip2.com/demos
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I am running out of time for now and just quickly playing, http://jsbin.com/IciTalI/2/edit?html,css,js,output   I am having some problems when you hover over a td, the other td hides.

I also just saw this demo using a table http://jquerytools.org/demos/tooltip/table.htm and this one http://jquerytools.org/demos/tooltip/any-html.htm using a table in the tip.  I'm sure there is something there.  Maybe this will give you a start or somebody else can pick it up.   I must run.  

I do like using flowplayer for video, but I have not used their jquery tools in a long time.
0
RobOwner (Aidellio)Commented:
Just picking up from padas...

Demo here: http://jsbin.com/uroZuqE/1/edit

$(document).ready(function() {
  $(".rowData td").each(function() {
    $(this).tooltip({ 
      tip: '#toolTipDetails',
      delay: 0,
      effect: 'slide'
    });
    
  });
});

Open in new window

0
RobOwner (Aidellio)Commented:
As for displaying custom tips for each row I've added a <p> at the top of the table:

<p id='tiptitle'></p>

Then when setting up the tooltip, just add an event to capture the mouseover event and set the <p> tag to whatever content you want:

$(document).ready(function() {
  $(".rowData td").each(function() {
    $(this).tooltip({ 
      tip: '#toolTipDetails',
      delay: 0,
      effect: 'slide'
    });
    
    $(this).on('mouseover',function() {
      // set the content as required
      $('#tiptitle').text($(this).text());
    });
    
  });
});

Open in new window

0
RobOwner (Aidellio)Commented:
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jxbmaSoftware ConsultantAuthor Commented:
As usual great solution!

Thanks,
JB
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.