jQuery Forum

I'm new to Cluetip, and not a jQuery expert, and I've run into a snag.  I'm trying to use the 'local' option to load content for various US states using an image map.  Mostly it's working - but I only see the content for the first tip - the other tips show up as blank.  To simplify, I created a test scenario using two text links.

 

Here's my javascript code:

 

$(document).ready(function() {
 $('a.tipsnotitle').cluetip({
  cluetipClass: 'jtip',
  mouseOutClose: true,
     hoverIntent: false,
     showTitle: false,
  local: true,
  hideLocal: true,
  sticky: true,
  closePosition: 'title',
  closeText: '',
  arrows: true
 });
});

 

And here's my HTML:

 

<p><a href="#" class="tipsnotitle" rel=".popup1">test1</a></p>
<p><a href="#" class="tipsnotitle" rel=".popup2">test2</a></p>
<div style="display:none;" class="popup1">popup1</div>
<div style="display:none;" class="popup2">popup2</div>

If I mouseover the 'test1' link, I see 'popup1' in the Cluetip.  If I mouseover the 'test2' link, I get a Cluetip, but with nothing in it. 

 

As I plan to have numerous tips throughout a page, I would prefer to do this with a single Javascript function, and change each 'rel' reference to refer to a different 'div'. 

 

I would appreciate help so that I can fix this problem and better understand the inner workings of Cluetip/jQuery.  Thank you.