JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300' rel='stylesheet' type='text/css'>

<div id="list">
        
    <h2>Caption options</h2>
    
    
    
    <h3>Slide</h3>
    <ul class="slide">
        <li>up</li>
        <li>down</li>
        <li>left</li>
        <li>right</li>
    </ul>
    
    
    <h3>Caption</h3>
    <ul class="value">
        <li data-value="600">speedIn</li>
        <li data-value="600">speedOut</li>
        <li data-value="easeInOutQuint" class="jeasing">easing</li>
        <li data-value="4">padding</li>
        <li data-value="#fff000">textColor</li>
        <li data-value="#000">showmeTextColor</li>
        <li data-value="#ff008a">showmeColor</li>
        <li data-value="0.7">showmeOpacity</li>
        <li data-value="#fff">overlayColor</li>
        <li data-value="0.4">overlayOpacity</li>
        <li data-value="240">captionWidth</li>
        <li data-value="true">captionCenter</li>
        <li data-value="40">captionGap</li>
    </ul>
        
    <div class="parent">position
        <img src="http://img856.imageshack.us/img856/4662/arrowdowni.png" alt="" />
    </div>
    <ul class="position child">
        <li>Can be used together to a corner position. <br /><br />
            i.e. <span class="highlight">position: "top right"</span> or <span class="highlight">data-position="top right"</span></li>
        <li>top</li>
        <li>right</li>
        <li>bottom</li>
        <li>left</li>
    </ul>

    <div class="parent">effect
        <img src="http://img856.imageshack.us/img856/4662/arrowdowni.png" alt="" />
    </div>
    <ul class="effect child">
        <li>fade</li>
        <li>slide</li>
        <li>show</li>
        <li>puff</li>
        <li>drop</li>
        <li>justShow</li>
        <li>liftCaption</li>
        <li>dropCaption</li>
        <li class="jqui extra">clip</li>
        <li class="jqui extra">scale</li>
        <li class="jqui extra">tooltip</li>
    </ul>
</div>

CSS

html { font-family: 'Ubuntu', sans-serif; }

#list {
    width: 550px;
    margin-bottom: 300px;
}

h3,
h4 {
    margin: 10px 0px 5px 0px;
    padding: 0px;
}

ul {
    margin: 0px;
    padding: 0px;
}

ul li,
.parent { 
    background: #333;
    color: #fff;
    padding: 6px;
    border-top: 1px solid #666;
    border-bottom: 1px solid #000;
    border-radius: 4px;
    font-size: 13px;
    letter-spacing: 1px;
}

.parent { cursor: pointer; }

.parent img {
    width: 14px;
    vertical-align: middle;
}

.child {
    display: none;
}

.child li {
    margin-left: 5px;
}

.jqui,
.jeasing {
    float: right;
    vertical-align: middle;
}

.jqui-tooltip {
    float: left;
    padding: 10px;
    display: none;
    font-size: 13px;
    color: #333;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    width: 90px;
    margin: 20px;
}

.highlight { 
    color: #333; 
    background: #fff;
    padding: 2px;
    border-radius: 5px;
}

.highlight,
.or { margin-right: 7px; }

JavaScript

var jqui = $('.jqui');

jqui
    .removeClass('jqui')
    .append('<img class="jqui" src="http://img33.imageshack.us/img33/2276/jqueryuilogo.png" alt="" />');

var jeasing = $('.jeasing');

jeasing
    .removeClass('jeasing')
    .append('<span class="jeasing">jQuery Easing</span>');


$('body').append('<div class="jqui-tooltip">This effect requires jQuery UI to work.</div>');

var jqui_tooltip = $('.jqui-tooltip');

var ulli = $('ul li');

ulli.each(function(){
    
    var t = $(this);
    var tp = $(this).parent('ul');
    var th = $(this).html();
    var th2 = $(this).html();
    var td = $(this).data();
    
    if ( tp.hasClass('effect') ) {
        var theText = 'effect';
    }
    else if ( tp.hasClass('slide') ) {
        var theText = 'slide';
    }
    else if ( tp.hasClass('position') ) {
        var theText = 'position';
    }
    else if ( tp.hasClass('value') ) {
        var theText = th;
        var th = td.value;
    }

    t.mouseenter(function() {
        t.html( '<span class="highlight">' + theText +': "' + th + '"</span> <span class="or">or</span> <span class="highlight">data-' + theText + ': "' + th + '"</span>' );
        t.find('.jqui:first').remove();
        
        $('.jqui').mouseenter(function() {
            $('.jqui-tooltip').stop(true,true).fadeIn(500);
            jqui_tooltip.position({
              my: "left bottom",
              at: "right bottom",
              of: $(this),
              collision: "flip"
            });
        });
    }).mouseleave(function() {
/*
        if ( tp.hasClass('this') ) {
            var th = th2;
        }
*/        
        $('.jqui-tooltip').stop(true,true).hide(600);
        t.html( th2 );
    });
    
});


$('.parent').click(function() {
    $(this).next('ul').stop(true,true).slideToggle( 300, 'easeInQuint' );
});