JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div class="thumbnail" 
    data-thumbsmall="http://s.s-bol.com/imgbase0/imagebase/thumb/FC/3/6/1/1/1002004012261163.jpg" 
    data-thumbbig="http://s.s-bol.com/imgbase0/imagebase/regular/FC/3/6/1/1/1002004012261163.jpg">
</div>

<div class="thumbnail"
    data-thumbsmall="http://s.s-bol.com/imgbase0/imagebase/thumb/FC/8/7/9/6/1002004012166978.jpg"
    data-thumbbig="http://s.s-bol.com/imgbase0/imagebase/regular/FC/8/7/9/6/1002004012166978.jpg">
</div>

<div class="thumbnail"
    data-thumbsmall="http://s.s-bol.com/imgbase0/imagebase/thumb/FC/7/2/0/5/1002004006245027.jpg"
    data-thumbbig="http://s.s-bol.com/imgbase0/imagebase/regular/FC/7/2/0/5/1002004006245027.jpg">
</div>

CSS

body{padding:15px;}

.thumbnail {
    position: relative;
    float: left;
    margin: 5px;
}

    .thumbnail a {
        display: block;
    }
    

.tooltip {
    display: none;
    position: absolute;
    padding: 5px;
    background:#fff;
    border:1px solid #666;
}

    .tooltip span.overlay {
        position: absolute;
        top: 0px;
        left: 0px;
        display: block;
    }

JavaScript

// hover thumbnail plugin

(function($){
    $.thumbnails = function(el, verticalOffset, horizontalOffset, options){
        var that = this;
        that.$el = $(el);
        that.el = el;
        that.$el.data("thumbnails", that);

    //init the plugin
        that.init = function(){
            that.options = $.extend({},$.thumbnails.defaultOptions , options);
            var $el = that.$el;
            var smallThumb =  $el.attr('data-thumbsmall');
            var bigThumb = $el.attr('data-thumbbig');
            $el.append('<a href="#"><img src="'+smallThumb+'"/></a>').append('<div class="tooltip"><img src="'+bigThumb+'"></div>');

        };
        that.init();
    };

    $.thumbnails.defaultOptions = {
        verticalOffset: 5,
        horizontalOffset: 5
    };

    $.fn.thumbnails = function( options, $el){
        return this.each(function(){(new $.thumbnails(this, $el, options));
                           
                                    
        //run time
            var $el = $(this);
            var $tooltip = $el.find('div.tooltip');
            var $tooltiphide = $el.children("div.tooltip");
                              
                                        
            $el.on('mouseenter',function(event) {
                horizontal = event.pageX - $(this).offset().left;
                vertical = event.pageY - $(this).offset().top;
                $(this).css('z-index','999').children($tooltip).css({'top': vertical + options.verticalOffset,'left': horizontal + options.horizontalOffset,'display':'block'});
            }).on('mousemove',function(event) {
                horizontal = event.pageX - $(this).offset().left;
                vertical = event.pageY - $(this).offset().top;

                $(this).children($tooltip).css({'top': vertical + options.verticalOffset ,'left': horizontal + options.horizontalOffset});
            }).on('mouseleave',function(event) {
               ...