views:

21

answers:

2

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
  });
});
A: 

in your ajax success handler, try adding something like,

$('a.avlink').not('.hasToolTip') // hasToolTip with a dot in it
.addClass('hasToolTip')   // hasToolTip without a dot in it
.tooltip({
    track: true,
    delay: 0,
    opacity: 0.9,
    showURL: false,
    showBody: " - ",
    extraClass: "pretty",
    fixPNG: true,
    left: -120
});
Reigel
tooltip appears on first rollover now but only shows once. Is there a way to access the <a> links regardless of id I could assign a unique id to each link?
Orange Tree
did you put that code as the last part of your ajax success handler, and still doesn't work as expected?
Reigel
A: 

I added an id "pr-cell" to the < td > outside each link and applied to all < a > tags with a unique id for each link works a treat thanks for your help.

$('#pr-cell > a').live('mouseover', function(e) {
    $('#pr-cell > a').not('.hasToolTip')
    .addClass('hasToolTip')
    .tooltip({
        track: true,
        delay: 0,
        opacity: 0.9,
        showURL: false,
        showBody: " - ",
        extraClass: "pretty",
        fixPNG: true,
        left: -120
    });
});
Orange Tree