HTML below is generated via ajax call into "purchase_content". I want to apply tooltip to each link in each row, can be up to 100 rows.
This is code at moment but with no success. If I rollover each link twice tooltip appears but wont ever appear again. Any thoughts on addressing link on each row?
<div id="purchase_content">
<div id="pr-listing">
<div id="pr-odd">
<table width="950" height="100" border="0" cellpadding="0" cellspacing="0">
<tr><td width="75" align="center" valign="middle">
<a href="#" id="avlink" title="3-5 Working Days">5-7 Days</a>
</td></tr>
</table>
</div>
<div id="pr-even">
<table width="950" height="100" border="0" cellpadding="0" cellspacing="0">
<tr><td width="75" align="center" valign="middle">
<a href="#" class="avlink" title="3-5 Working Days">Available Now</a>
</td></tr>
</table>
</div>
</div>
</div>
$('a.avlink').live('mouseover', function(e) {
var target = $(e.target);
return $(target).tooltip({
track: true,
delay: 0,
opacity: 0.9,
showURL: false,
showBody: " - ",
extraClass: "pretty",
fixPNG: true,
left: -120
});
});