<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style>
span.tooltip {
  background: transparent url(sprite_tooltips.png) no-repeat scroll 0 0;
  font: 15px/2 normal Helvetica,Arial,Verdana,sans-serif;
  display: none;
  height: 60px;
  position: absolute;
  left: 0;
  top: 0;
  text-align: left;
  white-space: nowrap;
  width: 220px;
  z-index: 100;
}

span.tooltip span {
  display: inline-block;
  padding: 15px 0 0 12px;
}

span.tooltip.left {
  background-position: 100% 0;
}

span.tooltip.left span {
  padding: 15px 0 0 17px;
}

span.tooltip.above {
  background-position: 0 100%;
}

span.tooltip.above span {
  padding: 13px 0 0 12px;
}

span.tooltip.above.left {
  background-position: 100% 100%;
}

span.tooltip.above.left span {
  padding: 13px 0 0 17px;
}
</style>

<p>
  Welcome to <strong style="text-decoration: underline">Advanced Tooltips!<span class='tooltip'><span><a href='#'>Legal Disclaimer</a></span></span></strong> the planet's premier celebrity tracking and monitoring service. 
</p>

<script>
var TT = {
  delay: 600,
  
  setTips: function(){
    
    $('.tooltip').parent().hover(function(){
      // store the tooltip being hovered
      TT.current = $(this);
      TT.timer = setTimeout(function(){
        // find the tooltip, 
        TT.current.find(".tooltip").fadeIn('fast');
      }, TT.delay);
    }, function(){
      // on mouseout, clear timer and hide tooltip
      clearTimeout(TT.timer);
      $(this).find(".tooltip").fadeOut('fast');
    }).attr("title", ""); // clear the title to stop browser tooltips
    
    var screenWidth = $(window).width();
    var screenBottom = $(window).scrollTop() + $(window).height();
    
    $(".tooltip").each(function(){
      // grab the containing element
      $container = $(this).parent();
      
      // give it relative position if required
      if ($container.css("position") != 'absolute' 
          && $container.css("position") != "fixed") {
        $container.css({position: 'relative'});
      }
      
      var totalHeight = $container.height() + $(this).outerHeight();
      var width = $(this).outerWidth();
      var offset = $container.offset();
      
      // now we get the position the tip
      var top = $container.height(); // default placement
      var left = 0;
      
      // re-position if it's off the right of the screen
      if (offset.left + width > screenWidth) {
        left = 0 - width + 42;
        $(this).addClass('left');
      } else {
        $(this).removeClass('left');
      }
      
      // re-position if it's off the bottom of the screen
      if (offset.top + totalHeight > screenBottom) {
        top = 0 - $(this).outerHeight();
        $(this).addClass('above');
      } else {
        $(this).removeClass('above');
      }
      
      // finally set the css properties to position onscreen
      $(this).css({
        "top": top,
        "left": left
      });
    });
  }
}
  
$(document).ready(function() {
  TT.setTips();
});

$(window).resize(function(){
  TT.setTips();
});
</script>

<style>
.tooltip {
  display: none;
  position: absolute;
  border: 1px solid #333;
  background-color: #ffed8a;
  padding: 2px 6px;
}

</style>
<ul>
 <li> <a href="#" class="location" title="Check out all the Celebs in LA this week!">Los Angeles</a></li>
 <li> <a href="#" class="location" title="Check out all the Celebs in New York this week!">New York</a></li>
</ul>

<script>
$(document).ready(function(){
  $('.location').hover(function(e){
    // Hover over code
    var titleText = $(this).attr('title');
    $(this)
      .data('tipText', titleText)
      .removeAttr('title');
      
    $('<p class="tooltip"></p>')
      .text(titleText)
      .appendTo('body')
      .css('top', (e.pageY - 10) + 'px')
      .css('left', (e.pageX + 20) + 'px')
      .fadeIn('slow');
  }, function() {
    // Hover out code
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
  }).mousemove(function(e){
    // Mouse move code
    $('.tooltip')
      .css('top', (e.pageY - 10) + 'px')
      .css('left', (e.pageX + 20) + 'px');
  });
});
</script>