asked on 9/6/2013

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

jQuery HTML JavaScript

Last Comment

jxbma

9/9/2013

Scott Fell

9/6/2013

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

jxbma

9/6/2013

ASKER

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

Thanks,
JB

Scott Fell

9/6/2013

Did you happen to catch q-tip in your search? http://qtip2.com/demos

Scott Fell

9/6/2013

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

9/7/2013

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

9/7/2013

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

ASKER CERTIFIED SOLUTION

Rob

9/7/2013

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

jxbma

9/9/2013

ASKER

As usual great solution!

Thanks,
JB

How do display a styled tooltip for a &lt;tr&gt;s in a HTML5/JQUERY table using jquery.tools.js?

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