My tooltip is flickering or blinking when I hover over it. How can I prevent this from happening?
http://jsfiddle.net/keshav_1007/en5tcjaw/ - check out the fiddle here
$(function() {
/*tooltips*/
$('.tooltip').hide();
$('.trigger').mouseover(function() {
var ttLeft,
ttTop,
$this=$(this),
$tip = $('#ttip'),
triggerPos = $this.offset(),
triggerH = $this.outerHeight(),
triggerW = $this.outerWidth(),
tipW = $tip.outerWidth(),
tipH = $tip.outerHeight(),
screenW = $(window).width(),
scrollTop = $(document).scrollTop();
if (triggerPos.top - tipH - scrollTop > 0 ) {
ttTop = triggerPos.top;
} else {
ttTop = triggerPos.top;
}
var overFlowRight = (triggerPos.left + tipW) - screenW;
if (overFlowRight > 0) {
ttLeft = triggerPos.left - overFlowRight - 10;
} else {
ttLeft = triggerPos.left;
}
$tip
.css({
left : ttLeft ,
top : ttTop,
position: 'absolute'
})
.stop(true,true).fadeIn(200);
}); // end mouseover
$('.trigger').mouseout(function () {
$('.tooltip').stop(true,true).fadeOut(200);
}); // end mouseout
});
I want to maintain the tooltip's position but eliminate the flickering that occurs while hovering over it. Any suggestions on how to achieve this?