JSFiddle - React, Tailwind, and code Playground

by calypsonian

HTML

<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap.min.css"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js"></script>
<form method="post" class="form span3">
    <div class="control-group">
        <div class="customer-name">
            <div class="field name-firstname">
                <label for="firstname">First Name</label>
                <div class="input-box">
                    <input type="text" value="" name="firstname" id="firstname" data-content="Please enter your first name"
                    class="input-block-level" required="required" data-original-title="" title="">
                </div>
            </div>
            <div class="field name-lastname">
                <label for="lastname">Last Name</label>
                <div class="input-box">
                    <input type="text" id="lastname" value="" name="lastname" data-content="Please enter your last name"
                    required="required" class="input-block-level" data-original-title="" title="">
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <button class="btn btn-large btn-warning pull-right" type="submit">Sign Up</button>
    </div>
</form>

JavaScript

jQuery(function () {
    jQuery.noConflict();
        jQuery('input[data-content]').popover({
            trigger: 'focus'
        }).on('hidden.bs.popover', function(){
            jQuery(this).show();
        });
});