Custom animations in tooltips.

Created by: nanuclickity

Problem

Tooltips only support fade animation. here Animations should be capable of being outsourced to css.

Benefit: You can use libraries like animate.css in tooltips.

Solution

Integration of custom css animation classes.

To enable tooltip animation you pass { animation: true }, after this you can pass { animation: 'animated bouceInDown'} and tooltips will automatically use this string as animation class.

Take animate.css for example, it's an awesome collection of CSS3 based animations.

Initialization is kept simplistic.

Dynamic Initialization

$(".music-menu").tooltip({
  animation: 'animated bounceInDown'
});

Auto Initialization

<span data-animation="animated bounceInDown" data-toggle="tooltip" title="Gryffindor"></span>