Custom animations in Bootstrap3

Problem

No support for custom animation behaviour of bootstrap’s elements.

Take bootstrap’s tooltip plugin for example. Animations are implemented through css, but there’s no support for custom css classes. See here.

Solution

Modify bootstrap to use supplied string as classes.
These classes will mutate the tooltip element after completion of shown and hidden events.

$('.menu-item').tooltip({ animation: 'animated wobble' });

or

<a data-toggle='tooltip' data-animation='animated hinge' title='Custom Hinge Animation'> Hover over me </a>

Just use bootstrap like you usually do and occasionally pass in a css class to enable custom animation.

Benefits

1. It’s backwards compatible.
2. Looks awesome.
3. I’ve already implemented this in tooltip module. See here.

Demo

A working demo of new change can be previewed here.

I have also filed a issue on github regarding this. Fixed it and now waiting for a approval before submitting pull request. See here.
So far, it’s getting good response.

I just can’t think of a reason why custom css3 animations should not be a part of it.

Update

Further discussion on PR punted this to bootstrap v4. ☺