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:

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.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..