JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="istockWannabe">
            <li>
                <img src="http://www.etftrends.com/wp-content/uploads/2010/08/04_03_3-stock-market-prices_web.jpg" width="600" height="400" title="My awesome description" />
                <div class="template_name">hover test</div>                    
                <p><a href="">SELECT</a></p>
            </li>
            <li>
                <img src="http://www.x-check.co.uk/images/products/x-stock-5.jpg" width="600" height="400" />
                <div class="template_name">hover test</div>                    
                <p><a href="">SELECT</a></p>
            </li>
            <li>
                <img src="http://riyamoneymatter.files.wordpress.com/2008/10/stock2_full.jpg" width="600" height="400" />
                <div class="template_name">hover test</div>                    
                <p><a href="">SELECT</a></p>
            </li>
            <li>
                <img src="http://www.etftrends.com/wp-content/uploads/2010/08/04_03_3-stock-market-prices_web.jpg" width="600" height="400" title="My awesome description" />
                <div class="template_name">hover test</div>                    
                <p><a href="">SELECT</a></p>
            </li>
            <li>
                <img src="http://www.x-check.co.uk/images/products/x-stock-5.jpg" width="600" height="400" />
                <div class="template_name">hover test</div>                    
                <p><a href="">SELECT</a></p>
            </li>
            <li>
                <img src="http://riyamoneymatter.files.wordpress.com/2008/10/stock2_full.jpg" width="600" height="400" />
                <div class="template_name">hover test</div>                    
                <p><a href="">SELECT</a></p>
            </li>
            <li>
                <img src="http://www.etftrends.com/wp-content/uploads/2010/08/04_03_3-stock-market-prices_web.jpg" width="600" height="400" title="My awesome description" />
          ...

CSS

/* Essential CSS */
            .iStockWannabe_trigger { display: block; position: relative; float: left; clear: both; }
            .iStockWannabe_above { z-index: 1; }
            .iStockWannabe_tooltip { display: none; position: absolute; z-index: 100000; }
            
            /* Skin CSS */
            .iStockWannabe_tooltip { background: #CCC; border: 1px solid #222; padding: 20px; text-align: center;
                                     -moz-box-shadow: inset 0 0 30px #444, inset 1px 1px 0 #666; -webkit-box-shadow: inset 0 0 30px #444, inset 1px 1px 0 #666; box-shadow: inset 0 0 30px #444, inset 1px 1px 0 #666, 0 0 3px #222;
                                     -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
            
            .iStockWannabe_tooltip img { -moz-box-shadow: 0 0 5px #111; -webkit-box-shadow: 0 0 5px #111; box-shadow: 0 0 5px #111; }
            
#istockWannabe { border: 1px solid #bbb; margin: 20px; padding: 20px; overflow: hidden; }

#istockWannabe li { float: left;  margin-right: 20px;  width: 100px; height: 100px;  }

.template_name { text-align: right; }

#istockWannabe p { text-align: center; }

JavaScript

$(document).ready(function() {
    $("#istockWannabe").iStockWannabe({ thumbMaxWidth: 50, thumbMaxHeight: 50, tooltipOffset: { top: 0, left: 120 } });
});


// Create a separate file for the script below
// Plugin starts here
;(function($) {

    $.fn.iStockWannabe = function (options) {
        
        var iStockWannabe = {},
            defaults = {
                createThumbs: true,         
                thumbMaxWidth: 100, 
                thumbMaxHeight: 100, 
                tooltipWidth: 200,
                tooltipHeight: 150,
                tooltipOffset: {
                    top: 0,
                    left: 0
                },
                transitionSpeed: 100,
                triggerOpen: "mouseenter",
                triggerClose: "mouseleave"
            };
        
        $.extend(defaults, options);
        
        iStockWannabe.Setup = function Setup(array, createThumbs) {     
            var $litems = array,
                $litem,
                $liImg,
                $liImgTrigger,
                liImgWidth,
                liImgHeight,
                liImgDim,
                liImgURL,
                $liImgExtraInfo,
                $temp,
                $tooltip,
                tooltipID,
                tooltipImgDim,
                o = defaults;
            
            for (var i = 0, l = $litems.length; i < l; i++) {
                $litem = $($litems[i]);
                $liImg = $litem.find("img");
                liImgWidth = $liImg.width();
                liImgHeight = $liImg.height();
                
                if (createThumbs) {
                    liImgURL = $liImg.attr("src");
                    $liImgExtraInfo = $liImg.attr("title") || "";
                    $liImg
                        .remove();
                    
                    if (liImgWidth > liImgHeight) {
                        liImgDim = "width=\"" + o.thumbMaxWidth + "\"";
                    }
                    else {
       ...