/* Tooltip sample*/ $(function() { $('.tip_trigger').each(function() { var tip = $(this).find('.tip'); $(this).hover( function() { tip.appendTo('body'); }, function() { tip.appendTo(this); }).mousemove(function(e) { var x = e.pageX + 20, y = e.pageY + 20, w = tip.width(), h = tip.height(), dx = $(window).width() - (x + w), dy = $(window).height() - (y + h); if (dx < 20) {x = e.pageX - w - 20;} if (dy < 20) {y = e.pageY - h - 20;} tip.css({ left: x, top: y }); }); }); });
<div class="container"> <h1> ToolTip Quick Sample </h1> <p> <a href="#" class="tip_trigger">Text ToolTip<span class="tip">Text content</span></a> </p> <hr /> <p> <a class="tip_trigger" href="http://www.google.com/">Google Search <span class="tip" style="width: 300px;"> <img src="http://www.google.com.tw/intl/en_com/images/srpr/logo1w.png" alt="" /> Google began in January 1996 as a research project by Larry Page and Sergey Brin when they were both PhD students at Stanford University in California. </span> </a> </p> <hr /> <p> <a class="tip_trigger" href="http://www.boston.com/bigpicture/" />The Big Picture - Boston.com <span class="tip" style="width: 450px;"> <img src="http://cache.boston.com/universal/site_graphics/bcom_small.gif" style="float: left; margin-right: 20px;" alt="" /> Photo blog Lane Turner, Lloyd Young, and director of photography Paula Nelson. </p> <hr /> <a href="http://www.the-digital-picture.com/Gallery/" target="_blank" class="tip_trigger"> <img width="50" height="50" src="http://www.the-digital-picture.com/Images/Other/Image-Gallery.jpg" /> <span class="tip"> <img src="http://www.the-digital-picture.com/Images/Other/Image-Gallery.jpg" alt="" /> <p> Canon and Nikon Digital SLR Camera and Lens Sample Pictures<p> </span> </a> </div>
/*--Tooltip Styles--*/ .tip { color: #fff; background: #1d1d1d; padding: 10px; position: absolute; z-index: 1000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .tip_trigger .tip { display: none; }