Bootstrap: Custom animations in tooltips.

[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>

[fat]

i like this a lot.

I think we should just update the default of the animation option to be "fade". and then allow people to pass in custom animation strings.

backwards compat and adds potentially really cool stuff :+1:

[nanuclickity]

@fat It is ready and looks awesome.
Here's a working demo with animate.css.

Approval for PR? :wink:

[nanuclickity]

@fat Given a chance, may i add this to modals, popovers and other possibilities?

[fat]

Sounds good to me, would be good to confirm with @twbs/team though. I know they have been thinking about doing more animations… want to make sure this sort of thing would fit in good with their ideas

[mdo]

Punting to v4.

[darma-avalos]

Hi guys, I am actually looking for this. Is this implemented in BS, could anyone give me a link where I can find info over the implementation. Thanks a bunch !

[nanuclickity]

@darma-avalos
This isn't implemented yet.
However, an experimental version for BSv4 is hosted here

[nanuclickity]

@fat @mdo

Update for v4

Current Tooltip Markup

<div class='tooltip'>
  ....
</div>

animation classes and tether.js positioning, both are done on .tooltip root element.

css animations rely heavily on transforms.
tether.js uses css transforms for positioning, and is overriding transforms of css animations.

Proposed

<div class='tooltip'>    // Tether.js acts here
  <div class='tooltip-inner-wrap'>  // Animation acts here
    ...
  </div>
</div>

Implementation

See this commit c74869513713d31373d1e787d34f764a69dec058
Raised a PR #20331

Demo

jsfiddle

[JefferyHus]

Not yet implemented and your implementation @nanuclickity isn't working in v4_Beta, thanks anyway mate :+1:

[nanuclickity]

Hmm.
I did it for v4_alpha.
I'll update it soon to v4_beta. Didn't realise it was released. 😄