1

As I'm still learning, this question might seem to be very simple to answer, but I still need to ask.

How do I need to change this script, so it will not display all the tooltips?

What is happening now is whenever I hover on .pink-nose a all the .tooltip are fading in at this same time 

    $(function(){
        var pn = $('.pink-nose a')
        var tp = $('.pink-nose .tooltip')

        tp.css({'display':'none'})
        pn.mouseover(function(){
            tp.fadeIn()            
        })
    })

Thank you for your help in advance

bdukes
  • 152,002
  • 23
  • 148
  • 175
Dom
  • 3,126
  • 14
  • 46
  • 68

2 Answers2

2

Instead of using tp in the handling function, you should start from this (the element that was moused over), and traverse to its related tooltip. Something like this:

$(function(){
    $('.pink-nose .tooltip').hide();

    $('.pink-nose a').mouseover(function(){
        $(this).parents('.pink-nose:first').find('.tooltip').fadeIn();
    })
})

The exact traversal will depend on the structure of your markup, take a look at the jQuery documentation for Traversing to figure out what will work best.

Allain Lalonde
  • 91,574
  • 70
  • 187
  • 238
bdukes
  • 152,002
  • 23
  • 148
  • 175
-1
$('.pink-nose .tooltip').hide().each(function() {
    var $this = $(this);
    $this.parents('a').mouseover(function() {
        $this.fadeIn();
    });
});
Allain Lalonde
  • 91,574
  • 70
  • 187
  • 238
fphilipe
  • 9,739
  • 1
  • 40
  • 52
  • 1
    I believe you will have some problems with reusing $this in the mouseover function. $this will not be bound the proper object. if you add `var` infront of the $this it should work. Also, you need the function declaration within ght each method. – Allain Lalonde Sep 25 '09 at 15:01
  • Good call with using `hide` instead of `css` – bdukes Sep 25 '09 at 15:02
  • It isn't unless you declare it within the parent funciton. – Allain Lalonde Sep 25 '09 at 15:04