I'm trying to create some stylish tooltips using jquery.tools.js.
I have a table defined in html as follows:
<td class="columnField1">Field 1</td>
<td class="columnField2">Field 2</td>
<td class="columnField3">Field 3</td>
<td class="columnField4">Field 4</td>
I would like to display the following html as a tooltip:
<!-- tooltip element -->
<div id="toolTipDetails" class="tooltip">
<td>Some Old Book</td>
<td class="label">Other Data</td>
<td class="label">Other Data1</td>
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.