Question

When I bring back a list of results from my database, they are displayed like so:

Result 1
Result 2
Result 3

And so on… Now I’ve got the jQuery Tipsy plugin working so when you hover over the top of Result 1 it shows that persons users name. The thing is, if I hover over Result 2, that too should have the Tipsy tooltip appear, but it is just displaying the normal browsers tooltip.

I’m assuming it’s because all the id‘s on the results a tag’s are name the same: ‘east’. I guess I need to make some sort of for each check in the jQuery yet I wouldn’t have the foggiest on where to add this in the jQuery.

Has anyone got a solution to this?

Answer 1

Your problem is having the same ID on all 3 a tags. Under no circumstance is it acceptable to have the same ID applied to more than one element on the same page. You’ll need to fix that.

<a href="result_one.html" id="result_one" class="tipsy">Result 1</a>
<a href="result_two.html" id="result_two" class="tipsy">Result 2</a>
<a href="result_three.html" id="result_three" class="tipsy">Result 3</a>

You can apply the same class to all three a tags and then apply tipsy to the class.

$(document).ready(function() {
  $('.tipsy').tipsy({fade:true,gravity:'n'});
});

Or you can do each ID separately.

$(document).ready(function() {
  $('#result_one').tipsy({fade:true,gravity:'n'});
  $('#result_two').tipsy({fade:true,gravity:'n'});
  $('#result_three').tipsy({fade:true,gravity:'n'});
});