title: Tooltip flickers while hovering on the tooltip
body: <p>I have a tootlip appearing while hovering on a text. Since the tooltip is big when i am moving the cursor over the tooltip it starts flickering or blinking. How can i stop that flickering?</p>
  
  <p><a href="http://jsfiddle.net/keshav_1007/en5tcjaw/" rel="noreferrer">http://jsfiddle.net/keshav_1007/en5tcjaw/</a> - here is the fiddle</p>
  
  <pre><code>$(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 &gt; 0 ) {
              ttTop = triggerPos.top;
          } else {
              ttTop = triggerPos.top;            
          }
  
          var overFlowRight = (triggerPos.left + tipW) - screenW;    
          if (overFlowRight &gt; 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
      });
  </code></pre>
  
  <p>I dont want the position of the tooltip to be changed. I need to stop the flickering while hovering on the tooltip. How to achieve that?</p>