JSFiddle - React, Tailwind, and code Playground

by tjdragon

HTML

<script src="http://qtip2.com/v/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/nightly/jquery.qtip.min.css">
<img src="http://farm4.staticflickr.com/3697/10494032894_52e9e4893d_m.jpg" data-image="http://farm4.staticflickr.com/3697/10494032894_52e9e4893d_b.jpg"  alt="Construccion Estadio Caliente" data-date="Noviembre 2013">

CSS

.qtip img{
    min-height: 90%;    
}

.QtipStyle{
    min-width: 90%;
    min-height: 90%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

JavaScript

$('img').qtip({
       suppress: false,
    content: {
            text: BuildImage,
            title: {
                text: QtipTitle,
                button: true
            }
        },
        position: {
            my: 'center', // ...at the center of the viewport
            at: 'center',
            viewport: $(document)
        },
    style: {
        classes:'QtipStyle ui-tooltip-light ui-tooltip-rounded'
    },
    show: {
        modal: true,
        event: 'click',
        solo: true
    },
    hide: false,
    
});

function BuildImage(){
    var img = $("<img/>",{src: $(this).data("image")});
    return img;
}

function QtipTitle(){
    return $(this).data("date");
}