Custom Tooltip Effect

Here you can see a customized "bouncy" tooltip effect.

HTML

<img src ="image1.jpg" title ="The tooltip text #1"/>
<img src ="image2.jpg" title ="The tooltip text #2"/>
<img src ="image3.jpg" title ="The tooltip text #3"/>
<img src ="image4.jpg" title ="The tooltip text #4"/>

Javascript

// create custom animation algorithm for jQuery called "bouncy"
$.easing.bouncy = function (x, t, b, c, d) {
    var s = 1.70158;
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

// create custom tooltip effect for jQuery Tooltip
$.tools.tooltip.addEffect("bouncy",

 // opening animation
 function(done) {
  this.getTip().animate({top: '+=15'}, 500, 'bouncy', done).show();
 },

 // closing animation
 function(done) {
  this.getTip().animate({top: '-=15'}, 500, 'bouncy', function()  {
   $(this).hide();
   done.call();
  });
 }
);

View Example