jQuery: multiple 'tipsy' tool tips

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?

Michael Irigoyen · Accepted Answer · 2011-01-21 21:12:07Z

3

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'});
});

edited Jan 21, 2011 at 21:12

answered Jan 21, 2011 at 20:45

Michael Irigoyen

23.1k18 gold badges92 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

no. Over a year ago

I don't quite follow, sorry! I've changed id='east' on the a link to class='east' but I'm unsure what I changed in the jquery, the only bit that I understand is getting anything from an ID is the line $('#east').tipsy({gravity: 'e'}); so I changed that to $('.east').tipsy({gravity: 'e'}); but it doesn't work. I'm probably going completely the wrong way about it :S

Michael Irigoyen Over a year ago

Be certain you have your jQuery called after the DOM is ready. I've updated my code to show this check.

no. Over a year ago

It was already being called after the DOM was ready. I've figured out what I was doing wrong. Your answer was correct, it was something elseI was doing wrong. I had 2 class attributes in my a tag which was causing the problem. Joined them both together and it is working fine. Thank you very much for your help!

Collectives™ on Stack Overflow

jQuery: multiple 'tipsy' tool tips

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related