Result
jQuery
$(document).ready(function () { // サムネイル $('div.thumbnail-item').mouseenter(function(e) { // ツールチップの位置情報 x = e.pageX - $(this).offset().left; y = e.pageY - $(this).offset().top; // z-indexを追加し、class="tooltip"のpositionの値を決める $(this).css('z-index','15').children("div.tooltip").css({'top':y + 10,'left': x + 20,'display':'block'}); // マウスムーブイベント }).mousemove(function(e) { // ツールチップの位置情報 x = e.pageX - $(this).offset().left; y = e.pageY - $(this).offset().top; // class="tooltip"のpositionの値を決める $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20}); // マウスが離れたらイベント発火 }).mouseleave(function() { // 元に戻す $(this).css('z-index','1') .children("div.tooltip") .animate({"opacity": "hide"}, "fast");//フェードアウト }); });
css
.thumbnail-item { position: relative; } .thumbnail-item a { display: block; } .tooltip { display: none; position: absolute; }
html
<div class="thumbnail-item"> <a href="javascript:void(0);"><img src="small.png" width="100" height="100" class="thumbnail" /></a> <div class="tooltip"> <img src="big.png" alt="" width="330" height="330" /> </div> </div>
via
Useful and Practical jQuery Image ToolTips Tutorial | Queness