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