Hi,
I'm pretty new to jquery, but I really love the cluetip plugin. I'm
having trouble, though, when I define tips for a series of <a>
elements which each call different local html data. When I use the
"rel" attribute to call distinct attribute values for the <div>s
holding the data (whether id or class), I only get data in the first
cluetip. For the rest I get the tip but it's empty.
Here's the script in my <head>:
$(document).ready(function() {
$('a.load-local').cluetip({local:true, hideLocal: true, sticky: true,
arrows: true, cursor: 'pointer'});
});
And here's the html in the body:
<a class="load-local" href="#" rel=".loadme">hover here</a><br />
<div id="loadme" class='loadme'>Here's some content<br />here's
another line.</div>
<a class="load-local" href="#" rel=".loadmeToo">hover here too</a><br /
>
<div id="loadAgain" class="loadmeToo">Here's some different content.</
div>
<a class="load-local" href="#" rel=".loadmeToo2">hover here too</
a><br />
<div id="loadStillAgain" class="loadmeToo2">Here's some really
different content.</div>
If I use the "rel" attribute of all the links to call one common class
for the data <div>s then I get the appropriate data showing up in each
tip. But then only the first data <div> is hidden. All the rest in the
series are left visible in the document body (as well as being cloned
in the cluetip).
Here's the html I'm using in that case:
<a class="load-local" href="#" rel=".loadme">hover here</a><br />
<div id="loadme" class='loadme'>Here's some content<br />here's
another line.</div>
<a class="load-local" href="#" rel=".loadme">hover here too</a><br />
<div id="loadAgain" class='loadme'>Here's some different content.</
div>
<a class="load-local" href="#" rel=".loadme">hover here too</a><br />
<div id="loadStillAgain" class='loadme'>Here's some really different
content.</div>
Am I doing something wrong? This is a trivial example, of course, but
the principle applies to a larger web-app I'm working on.
Thanks,
Ian
