jQuery - use .hover instead of .click

Question

I have the following code on my page.

As you see it's a list of links, and every time a link is clicked, the popup box opens up right underneath the link in question.

Now, what I need to do is basically the same, except I need to use the .hover event and delay the execution by 2 seconds. So instead of clicking, the user should keep the cursor over a link for 2 seconds.

Sounds simple enough but I can't get the positioning to work properly. here's what I tried:

$('a.showreranks').hover(function()
    {   
    $(this).data('timeout', window.setTimeout(function()
        {
            position = $(this).position();   
        $('#rerank_details').css('top', position.top + 17);   
        $('#rerank_details').slideToggle(300);    
        }, 2000));
    },
    function()
    {
        clearTimeout($(this).data('timeout'));
    });

Can someone modify this to make it work?

Engineer · Accepted Answer · 2012-06-21 18:14:54Z

4

Try like this:

$('a.showreranks').hover(function()
{   
    var self = this;
    $(this).data('timeout', window.setTimeout(function() {
        var position = $(self).offset();   
        $('#rerank_details').css('top', position.top + 17);   
        $('#rerank_details').slideToggle(300);    
    }, 2000));
},
function()
{
    clearTimeout($(this).data('timeout'));
});

DEMO

edited Jun 21, 2012 at 18:14

answered Jun 21, 2012 at 17:53

Engineer

48.9k12 gold badges90 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sveti petar Over a year ago

Hm. Works on the jsFiddle but not on my actual page. I simplified things a bit for this example as the actual code is a lot longer (there's a lot of other functionalities there). Could you take a look here and see if you can figure out why it won't work: jovansfreelance.com/booklist/list/Syn/GoT (note that the div id on this page is #gen_details and the link class is .itemshow

sveti petar Over a year ago

And the JS is in scripts.js. Hovering over book titles is what opens the div, but it opens on top of the page.

Engineer Over a year ago

@robert What is the problem? The position?

Engineer Over a year ago

I have updated my answer.Instead of jquery.position you need to use jquery.offset. Read more about -> api.jquery.com/position

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

jsFiddle demo

$('ul').on('mousemove','li',function(e){
    
    var m = {x: e.pageX, y: e.pageY};
    $('#rerank_details').css({left: m.x+20, top: m.y-10});
    
}).on('mouseenter','li',function(){
    
    var t = setTimeout(function() {
        $('#rerank_details').stop().slideDown(300);
    },2000);
    $(this).data('timeout', t);
    
}).on('mouseleave','li',function(){
    
    $('#rerank_details').stop().slideUp(300);
    clearTimeout($(this).data('timeout'));
    
});

The setTimeout will act like a hover intent that actually delays the execution for 2 seconds
and counts the time hovered inside a data attribute of the hovered element - that gets 'nulled' on mouseleave.
I added also a few lines of code that will make your tooltip follow the mousemove.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 21, 2012 at 17:59

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

jQuery - use .hover instead of .click

2 Answers 2

4 Comments

jsFiddle demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related