<script type="text/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({left: '-=15'}, 100, 'bouncy', done).show();
},
// closing animation
function(done) {
this.getTip().animate({right: '+=15'}, 8000, 'bouncy', function() {
$(this).hide();
done.call();
});
}
);
$(function(){
var triggerElement = $('#login_img');
$(triggerElement).tooltip({
effect: 'bouncy',
position: 'center left',
offset: [14, 0],
delay: 400,
fadeOutSpeed: 100,
predelay: 0,
relative:true,
events: {
def: <?= (isset($homepage))? '"customOpenEvent,mouseout",':'"mouseover,mouseout",' ?>
tooltip: "mouseover,mouseout"
}
});
$(document).ready(function () {
triggerElement.trigger('customOpenEvent');
});
});
</script>
With the above code, my tooltip is displayed once the page is loaded. But when I mouse over the trigger, it disappears.
How do I keep it displayed even if I mouseover the trigger?
