Avatar of jxbma
jxbmaFlag for United States of America asked on

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
jQueryHTMLJavaScript

Avatar of undefined
Last Comment
jxbma

8/22/2022 - Mon
Scott Fell

Is this the one you are using http://jquerytools.org/demos/tooltip/index.html ?
ASKER
jxbma

Yes, this is what I'm attempting to use.

Thanks,
JB
Scott Fell

Did you happen to catch q-tip in your search?  http://qtip2.com/demos
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Scott Fell

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.
Rob

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

Rob

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

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Rob

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
jxbma

As usual great solution!

Thanks,
JB