Coding a button tooltip that comes up 700ms after mouseover

Question

I'm trying to create a tooltip that comes up 700ms after the mouse rolls onto a button. When the mouse rolls off, the tip should disappear. Currently I have the following code that brings the tip up on mouseover and takes it away on mouseleave:

onmouseover:function(editor,url) {
                  $('#mlinc_tip').show();
               },
onmouseleave:function(editor,url) {
                 $('#mlinc_tip').hide();
               }

This works fine, but no delay.

If I change the onmouseover function to:

onmouseover:function(editor,url) {
         setTimeout(function() {
             $('#mlinc_tip').show(0);},700);
           },

I get the 700ms delay on mouseover but when I roll the mouse off of the button, there's chatter that generates a couple of mouseover's before the mouse is completely off, and those start the timeout again and 700ms later the tip is back.

Thanks for any ideas.

Source · Accepted Answer · 2017-03-27T09:00:52.340

1

You need to use delay(), but show wont queue so use css

onmouseover:function(editor,url) {
         $('#mlinc_tip').delay(700).css({'display':'block'});
       }

OR

onmouseover:function(editor,url) {
         $('#mlinc_tip').css({'display':'block','opacity':0}).delay(700).animate({'opacity':1},0);
       }

edited Mar 27 '17 at 09:00

answered Mar 27 '17 at 08:29

Source

1,028
2
10
21

You forgot to remove the setTimeout – mplungjan Mar 27 '17 at 08:30
`show()` doesn't use the animation queue, so will be unaffected by `delay()`: https://jsfiddle.net/w1vm3o3d/ – Rory McCrossan Mar 27 '17 at 08:32
right, but css will? – Source Mar 27 '17 at 09:01

Coding a button tooltip that comes up 700ms after mouseover

1 Answers1