JSFiddle - React, Tailwind, and code Playground

by goropoo

HTML

<div class="thumbnail-item">
http://jsfiddle.net/kachibito/RGRkW/light/#share    <a href="javascript:void(0);"><img src="http://kachibito.net/wp-content/uploads/2010/08/wp.png" width="100" height="100" class="thumbnail" /></a>
    <div class="tooltip">
        <img src="http://kachibito.net/wp-content/uploads/2010/08/wp.png" alt="" width="330" height="330" />
     
    </div> 
</div>

CSS

.thumbnail-item { 
    position: relative;  
}
.thumbnail-item a { 
    display: block; 
} 
.tooltip { 
    display: none; 
    position: absolute; 
}

JavaScript

$(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");//フェードアウト
    });
});