title: Guide for created a tooltip simple?
body: <p>Why in following code(example) tooltip box come out from page, how can it fix as automatic(dynamic) with page that not come out from page?</p>
  
  <p><strong>Demo:</strong> <a href="http://jsfiddle.net/3UzDG/" rel="nofollow noreferrer">http://jsfiddle.net/3UzDG/</a> (i mane is about <code>how</code> that mouse over on it display toltip box out page) SEE image:</p>
  
  <p><img src="https://i.stack.imgur.com/NI6sw.gif" alt="enter image description here"></p>
  
  <pre><code>$('li a').hover(function() {
  
      var title = $(this).next('.tooltip').html();
      var offset = $(this).offset();
  
      $tooltip = $('&lt;div /&gt;').addClass('show_tooltip').html(title);
  
      var delay = setTimeout(function() {
  
          $('body').append($tooltip);
          var width = $tooltip.outerWidth();
  
          var p_top = offset.top;
          var p_left = offset.left - width; 
          $tooltip.css({top: p_top, left: p_left}).fadeIn(180);
  
      },280);
  
      $(this).data('delay', delay);
      $(this).data('tooltip', $tooltip);
  
  },function() {
  
      delay = $(this).data('delay');
      $tooltip = $(this).data('tooltip');
      $tooltip.remove();
      clearInterval(delay);
  
  });
  </code></pre>