JSFiddle - React, Tailwind, and code Playground

by technik300

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="example">

    
    <p><label id="use-selector-label" class="checkbox"><input id="use-selector" type="checkbox" />
    <span data-title="you must re-run this jsFiddle to change the selector option once you've started the demo">use selector option</span>
    </label></p>
    
    <pre id="with-selector-code">$('body').popover({
    selector: '[rel=popover]'
});</pre>
    <pre id="without-selector-code">$('[rel="popover"]').popover();</pre>
    
    <p><a id="add-button" class="btn btn-small btn-success">add new popover</a></p>
    
    <div class="buttons">
        <hr />
        
        <p><a class="btn btn-large btn-danger" rel="popover" data-title="Static" data-content="This button was specified in the initial HTML document" data-placement="top">hover for popover</a></p>
    </div>
</div>

CSS

.example{margin: 8px 80px;}
.buttons, pre{ display: none;}

JavaScript

function usingSelectorOption() {
    return $('#use-selector').is(':checked');
}

function updateCodeView() {
    $('#with-selector-code').toggle(usingSelectorOption());
    $('#without-selector-code').toggle(!usingSelectorOption());
}

$(function() {
    // update code view when checkbox is toggled
    updateCodeView();
    $('#use-selector').click(function() {
        updateCodeView();
    });
    
    
    var startedDemo = false;
    $('#add-button').click(function() {
        // One-time initialization
        if (!startedDemo) {
            if (usingSelectorOption()) {
                $('body').popover({
                    selector: '[rel=popover]'
                });
            } else {
                $('[rel="popover"]').popover();
            }
            
            startedDemo = true;
        }
        
        // disable selector checkbox, put a tooltip on it, and show the buttons panel
        $('#use-selector').attr('disabled', 'disabled');
        $('#use-selector-label span').tooltip();
        $('.buttons').show();
        
        // add a new button that triggers (or doesn't) a popover, with the appropriate message
        var does = usingSelectorOption() ? 'DOES' : 'does NOT';
        $('<p><a class="btn btn-large btn-danger" rel="popover" data-title="Dynamic" data-content="This button was added dynamically by JavaScript" data-placement="top">notice that this ' + does + ' trigger a popup</a></p>').appendTo('.buttons');
    });
});