Jump to content


Displaying tooltips with a delay

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying out GSAP for the first time, and having some trouble with creating this animated menu. I've managed to create a list of navigation items, where the top position of each link is animated on mouseenter and mouseleave. As well as this, I'd like to display a tooltip for each link, but the tooltip should only display after a four-second-delay.


The problem is, that right now the onComplete function is getting called and hence the tooltip displayed even when just quickly hovering over the list-item, but the onComplete should only be triggered, if the both animating the top position has been completed and the four seconds are up. So I think I ought to somehow wrap the onComplete call in a delay function, but how do I do that? I just don't seem to be able to figure out the right syntax, and I really hope, that you can help me out here.



Link to comment
Share on other sites

Hi Vespa. Welcome to the GreenSock forums.


Thanks so much for providing the simple and easy to work with example.

I pasted your code into codepen.io and made some edits.


Yes the problem is that you had no way to kill the delayed tween and it would fire even after the mouseleave.

What I did was create a reference to the tween that handles waiting 4 seconds for the tooltip to show up. This way that tween can be killed whenever you mouseleave any of the elements.


Here is an example (I set the delay lower for testing ease)

See the Pen 11f67c96a8fc497ce96dd5ce63bf15f3 by GreenSock (@GreenSock) on CodePen


if you expand the js view (cmd-3 / cntrl-3) the js will be easy to read.


Let me know if that does what you want.

Link to comment
Share on other sites

Thank you for the quick reply. This was exactly what I needed.

Link to comment
Share on other sites

The code is functional and does what it should, but I've just noticed, that it's throwing this error on pageload. Any ideas how to get around this?


TypeError: currentToolTipTween is undefined


Link to comment
Share on other sites

I got rid of the error by giving the variable an empty value to start with:

var currentToolTipTween = '';


Is it possible to get this to work in IE8 too or is GSAP only supported in modern browsers?

Link to comment
Share on other sites

The core features of GSAP will work all the way back to IE6, including 2D transforms.


IE8 is just a little more pesky. Good catch on currentToolTip being undefined.


In my latest version i do a quick check to see if it is defined like so:






In general I found that codepen wasn't really functioning in IE8 so I hosted a page elsewhere.

Test this in ie8: http://www.snorkl.tv/dev/gsforums/tooltipie8.html


I did have to make a number of changes so that this would play nice with IE8.


1: you were setting opacity:0 in your css for .tooltip. IE8 doesn't recognize opacity so that is why all the tooltips were displaying initially and the tweens didn't work.


When you set opacity with TweenLite, the CSSPlugin is smart enough to apply an ms-filter to the object. In the css I changed opacity:0 to visiblility:hidden to hide the tooltips on initial render.


2: There was an error caused by how the onCompleteParams were being passed in that I missed initially.



onCompleteParams: $(this).find('.tooltip')}); 


onCompleteParams: [ $(this).find('.tooltip') ] }); 


The onCompleteParams need to be an array, note the [ ]


Test my page and see if it works for you.


I have a pen of the IE8 changes here:

See the Pen d55720ee9d2278e96d80672c3658aaad by GreenSock (@GreenSock) on CodePen

(but again I found that codepen wasn't working well in IE8 and was throwing its own errors un-related my code)
Link to comment
Share on other sites

Thank you so much for all your tips and answers. I was forced to move on today due to a deadline and switch to jQuery, but this will for sure not be the last time, that I'll be needing similar functionality, and will definitely try this out next time. It's also good to know, that you guys are fast and thorough when responding to any questions, that might arise while using Greensock for the first few times.


"1: you were setting opacity:0 in your css for .tooltip. IE8 doesn't recognize opacity so that is why all the tooltips were displaying initially and the tweens didn't work."


In the actual tooltip menu, that I was working on, there is of course a lot more styling on the tooltips. They have a border-radius in all corners and box-shadow, and I'm adding support for those in older IE browsers by using CSS Pie. I was convinced, that the problems I was having, had something to do with the pie.htc. For setting opacity for older IE I was using the required alpha filters, but you're saying, that "visibility: hidden" should be used instead? I'll have another go at it later on, when I'm at the office again.

Link to comment
Share on other sites

I just like visibility:hidden because it works everywhere. Also, we have an autoAlpha property for tweens that will handle both visibility and opacity simultaneously. It can come in real handy. For instance if you tween an element to autoAlpha:0 it will tween the opacity to 0 and as soon as the tween is done also toggle the visibility to hidden.


If you tween the autoAlpha to 1 it make sure visibility is visible before the tween starts.


Check it out next time you dabble with GSAP.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.