Show and Hide jQuery UI Tooltip with Animation

jQuery UI 1.90 library tooltip is an awesome widget. By default, the jQuery UI Tooltip is displayed without any animation. But do you know that you can animate the tooltip while showing and on hiding? Yes, It's Possible. In this post, You will see that how that can be done.

Related Post:

• Create Tooltip using jQuery UI library
• Move jQuery UI Tooltip with mouse

jQuery UI Tooltip widget provides 2 options to animate the tooltip while showing and hiding.

• show: When set to false, no animation and the tooltip will be shown immediately. When set to true, the tooltip will fade in with the default duration and the default easing.
  
  
• hide: When set to false, no animation and the tooltip will be hidden immediately. When set to true, the tooltip will fade out with the default duration and the default easing.

So, below jQuery code will show the tooltip using "slidedown" effect with the delay of 250 ms.

$("#aSlideDown").tooltip({     show: {         effect: "slideDown",         delay: 250     } }); 

As I mentioned earlier, different animation effect can be provided while showing and hiding the tooltip. So below jQuery code will show tooltip using "fold" effect and hide using "shake" effect.

$("#aFoldandShake").tooltip({     show: {          effect: "fold",          delay: 250     },     hide: {         effect: "shake",         delay: 250    } }); 

See result below


You can use any of the below value for effect property.

• blind
• bounce
• clip
• drop
• explode
• fade
• fold
• highlight
• puff
• pulsate
• scale
• shake
• size
• slideDown

See Complete Code

Feel free to contact me for any help related to jQuery, I will gladly help you.