JQuery :: Fire Tooltip On Table Row Hover?

I want the Tooltip (the one I'm using is the jQuery Tools tooltip) to fire each time the mouse goes over the entire table row. At present it only fires when the mouse goes over the final <td>. Here is the table markup:

<table width="310px" class="dataTable" border="0" cellspacing="0" cellpadding="0">
<tr class="data">
<td>24 hours</td>
<td>1.73</td>
<td>14.55</td>
<td><a class="dImage" href="#">+</a>
<div class="tooltip"><img src="images/diagram1.png" alt="diagram1" width="159" height="231" style="margin-left:65px;"/></div></td>
</tr></table>

The only slight complication is that I currently have some jQuery adding a zebra effect to the table rows. So if I could keep the Zebra striping along with the Tooltip activation that would be good.

Here is the jQuery for the Zebra stripping:
//Zebra Striping
$('tbody tr:odd').addClass('zebra');
$('tbody tr.data').mouseover(function(){
$(this).addClass('zebraHover');
});
$('tbody tr.data').mouseout(function(){
$(this).removeClass('zebraHover');
});

And here is the relevant jQuery for the Tooltip firing:
$(".dImage").tooltip({
offset: [10, 2],
relative: 'true',
effect: 'slide'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });

I've tried simply adding the class
="dImage" to the <td> tag e.g. <td class="dImage"> but although the tooltip kind of fires it doesn't include the image, it loads the next bit of text.