Jquery How To Affect Single Element On Mouseover

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?

Solution 1:

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.

Solution 2:

$('.pink-nose .tooltip').hide().each(function() {
    var $this = $(this);
    $this.parents('a').mouseover(function() {
        $this.fadeIn();
    });
});