JSFiddle - React, Tailwind, and code Playground

by goropoo

HTML

<div class="thumbnail-item">
<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 { 
     display: inline; 
    position: relative;  
}
.thumbnail-item a img { 
   
    border:solid 1px #333333;
} 
.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 + 0,'left': x + 0,'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 + 10});
        
    // マウスが離れたらイベント発火        
    }).mouseleave(function() {
        // 元に戻す
          
        $(this).css('z-index','1')
        .children("div.tooltip")
        .animate({"opacity": "hide"}, "fast");//フェードアウト
    });
});