JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<ul id="istockWannabe">
            <li>
                <span rel="http://fc02.deviantart.net/fs70/i/2011/151/b/8/trifels_castle_stock_29_by_malleni_stock-d3holp3.jpg">
                    <img src="http://fc02.deviantart.net/fs70/i/2011/151/b/8/trifels_castle_stock_29_by_malleni_stock-d3holp3.jpg" width="20" height="20" />
                    <span class="iStockWannabe_description">Hey</span>
                </span>
    </li>
        </ul>

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: #333; 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_description { color: #fff; font-size: 13px; text-shadow: -1px -1px 1px #222; }

JavaScript

$(document).ready(function() {
    $("#istockWannabe").iStockWannabe();
});


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

    $.fn.iStockWannabe = function (options) {
        
        var iStockWannabe = {},
            defaults = {
                createThumbs: false,         
                thumbMaxWidth: 100, 
                thumbMaxHeight: 100, 
                tooltipWidth: 200,
                tooltipHeight: 150,
                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,
                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 {
                        liImgDim = "height=\"" + o.thumbMaxHeight + "\"";
                    }
                    
                    $litem
                        .append("<span rel=\"iStockWannabe_tooltip_" + (i +...