Question

Yo my friends having a coding error with his site, and asked me for help. However I’m stuck as well. You see when you hover over a link a tooltip will popup, but he wants it on the end of the link, not in the middle. (Btw he’s using a phpbb forum)

$(document).ready(function() {
    $("a.topictitle").hover(function() {
        $(this).next(".topic_desc_pos").stop()
        .animate({left: "100", opacity:1}, "fast")
        .css("display","block")
    }, function() {
        $(this).next(".topic_desc_pos").stop()
        .animate({left: "150", opacity: 0}, "fast", function(){
            $(this).hide();
        })
    });
});

If it helps here’s his forum – http://www.codexvideos.com/viewforum.php?f=47

Answer 1

The main issue is that you’re animating left 100px, but you never reset the animation back to its original starting point, which means the more I hover over a link, the farther right that tooltip goes. In fact, your code indicates that rather than moving it back left 150 pixels, you continue to move it right on the ‘mouseout’ event. You want to set it to always start up at the same spot — in this case, you want the starting spot to be the right end of that link.

In the ‘mouseout’ part of the hover (the second hover block), change it to something like this:

    $(this).next('.topic_desc_pos')
        .stop()
        .fadeOut('fast')
        .css('left', $(this).width());

This should accomplish the same objective as above, while ensuring that the “left” value is always at the end of the link. If you notice I set “left” to $(this).width(). This moves it back to the end of the link after fading out.

Also, You should probably also set a time delay to make sure the user is actually hovering over a link and not just moving the mouse across the screen, and also to make sure it stays visible for another second or two before fading out.

Hope that helps. Good luck.