[jQuery] Only first cluetip on a page works
I'm using cluetip to show glossary definitions on a page that has an
article on it. I can only get the first cluetip to work correctly. Not
sure what I am doing wrong.
Here is my script:
<script type="text/javascript">
$(document).ready(function() {
$('#glossary').cluetip({
splitTitle: '|', // use the invoking element's title attribute to
populate the clueTip...
// ...and split the contents into separate divs
where there is a "|"
showTitle: true,
arrows: true,
dropShadow: true,
positionBy: 'mouse'
});
});
</script>
And then I have a bunch of anchor tags throughout the html page that
look something like this:
<a id="glossary" href="#" title="Social Security|definition
here">Social Security</a>
<a id="glossary" href="#" title="Benefit|definition here">Benefit</a>
<a id="glossary" href="#" title="Will|definition here">Will</a>
etc.
Ideas? Does the id or the href have to be unique for each one?
TIA,
Brian Barnett