CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jay Forte
Jay Forte

Reputation: 23

javascript tooltip follows cursor position

I'm trying to make a tooltip with an image appear above the cursor when hovering over a thumbnail, but I'm working with another developer's code and having trouble figuring it out.

I've created a simplified version of the code on the website which can be found below, or on jsfiddle: http://jsfiddle.net/justinwebpro/kf8Lqn5v/5/

or a live site with the issue I'm trying to correct here: https://www.mychicnest.com/ProductDetails.asp?ProductCode=503

I'm trying to use the method .mousemove() to make it follow the mouse position rather than being static at the top of the page but I'm doing something wrong. Ideally it would factor in an offset of the cursor position, but getting it to work at all comes first!

HTML

<div id="swatch">
    <div id="panel">  
        <img src="large.jpg" id="large-image" />
    </div>
    <div id="thumbs">
        <img src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
    </div>
</div>

CSS

#swatch { position: relative; }

#panel {
        position: absolute;
        top: -115px;
        left: 115px;
}

JavaScript

function swThumbEffect(){
    $('#panel').css('visibility','hidden');

    $('#thumbs img').mouseover(function(){
        $('#largeImage').attr('src',$(this).attr('src'));
        $('#panel').css('visibility','visible');
    });
    $('#thumbs img').mouseout(function(){
        $('#panel').css('visibility','hidden');
    });
}


// This is what I came up with to get the swatch to follow the cursor but it isn't working as I hoped. Ideally it would factor in an offset of the cursor, but getting it to work comes first.
$('#thumbs img').mousemove(function( event ) {
    var mousePositionX = event.pageX;
    var mousePositionY = event.pageY;
    log(mousePositionX);
    log(mousePositionY);
    $('#panel').css('left', mousePositionX);
    $('#panel').css('right', mousePositionY);
});

Thanks in advance!

Upvotes: 2

Views: 1273

Answers (2)

Julien Gr&#233;goire
Julien Gr&#233;goire

Reputation: 17144

You have a couple of problems with you current function, but it should work with minor modifications. First problem: you're setting right css property to clientY. It should be top:

     $('#panel').css('top', mousePositionY);

Then you need to consider position of #panel parent to position it correctly. You can do it this way:

     //You should avoid showing the panel right under the mouse, because it'll mess
     //with your mouseout event since the #thumb will be hidden.
     //You can add 20 pixels to the position for example.  
     var mousePositionX = event.pageX-$('#panel').parent().offset().left+20;
     var mousePositionY = event.pageY-$('#panel').parent().offset().top+20;

And maybe you should try to put the mousemove call in your swThumbEffect function with other mouseevents call.

And normally it should work properly.

Upvotes: 1

JohnnyJS
JohnnyJS

Reputation: 1472

every time mousemove fires, (5-10 times in second) you must update your element position.

This is the code i wrote the other day:

http://jsfiddle.net/y5ua8n9f/

If I will have time later, i will update here.

Best of luck!

Upvotes: 0

Related Questions