JSFiddle - React, Tailwind, and code Playground

HTML

The image preview tooltip width is 100% in this demo only<br>
<br>
<div id="demo">
    <ul id="sortable">
        <li>
            <a class="preview" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/jammin.gif" title="This image has a caption">
                <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/jammin.gif" />
            </a>
        </li>
        <li>
            <a class="preview" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cleanin.gif">
                <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cleanin.gif" />
            </a>
        </li>
    </ul> 
</div>

CSS

.preview { cursor:pointer; }
#preview {
    color: #ddd;
    background: #222;
    border: 1px solid #333;
    padding: 5px;
    display: none;
    opacity: 0.9;
    filter: alpha(opacity=90);
    text-align: center;
}

li { list-style-type: none; }
#sortable li img { width: 40px; }

JavaScript

$(document).ready(function(){
    $("#sortable").sortable();
    $("#sortable").disableSelection();
});

// You should load the image preview script separately

/*
* Image preview script 
* powered by jQuery (http://www.jquery.com)
* 
* written by Alen Grakalic (http://cssglobe.com)
* 
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/

this.imagePreview = function(){    
    /* CONFIG */
    xOffset = 10;
    yOffset = 30;
    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result
    /* END CONFIG */
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                 
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
                         function(){
                             this.title = this.t;    
                             $("#preview").remove();
                         });    
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });            
};

// starting the script on page load
$(document).ready(function(){
    imagePreview();
});