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

Scott Fell

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

jxbma

ASKER

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

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

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jxbma

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?