Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript simple jQuery tooltip

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #33942
    7th
    Participant

    Hi everyone!

    I’m trying to create some simple popups with jQuery.

    Here’s the markup I have:



    And the jQuery:


    $("#social ul li a").append("");
    $("#social ul li a").hover(function(){
    $(this).find("em").animate({
    opacity: "show",
    top: "-22"
    }, "fast");
    var hoverText = $(this).attr("name");
    $(this).find("em").text(hoverText);
    }, function(){
    $(this).find("em").animate({
    opacity: "hide",
    top: "0"
    }, "normal");
    });

    Yes, I told you it was simple, and this is working almost the way I want, but it’s problematic (with some bugs). Here’s the link: Esparatrapo

    The popups is working in the icons above the main logo.

    I think the problem with it is that the tag is created inside the anchor tag and so, the tag receives the :hover effect from the anchor tag. I have no idea about how to solve this problem. Anyone out there willing to help?

    Thanks in advance! =]

    #85096
    7th
    Participant

    Just found a solution here on css-tricks using the “.filter(‘:not(:animated)’)” before .animate and now it’s working as it should. Thanks! ;)

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.