JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<div class="container">
    <div class="row">
    <div class="span8 border">
        <div class="item">

            <button class="close" title="Remove"><i class="icon-remove"></i></button>
                        <button class="close" title="Move up"><i class="icon-chevron-up"></i>&nbsp;</button>
            <button class="close" title="Move down"><i class="icon-chevron-down" ></i>&nbsp;</button>
            <h4>SCHOOL</h4>

            
<form class="form-horizontal">
            <fieldset>
              <div class="control-group">
                <label class="control-label">School name:</label>
                <div class="controls">
                  <span class="input-xlarge uneditable-input">Some value here</span>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label">School location:</label>
                <div class="controls">
                  <span class="input-xlarge uneditable-input">Some value here</span>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label">School type:</label>
                <div class="controls">
                  <span class="input-xlarge uneditable-input">Some value here</span>
                </div>
              </div>
                <div class="control-group">
                <label class="control-label">Story:</label>
                <div class="controls">
                  <textarea class="input-xlarge">Some value...

CSS

.border{
    border: solid 1px black;
}
.item button.close{
opacity:0;
}
.item:hover button.close{
opacity:1;
}
.hidden{
display:none;
}

JavaScript

$(function(){
    $( "button" ).on("click", function( e ){
    return false;
    });
    
    $( ".small-item" ).popover({
        delay: {
            show:850,
            hide: 50
        },
        //trigger: "manual",
        placement: "bottom",
        title: "School details",
        content: function(){
return $( "#popover-content" ).html();            
        }       
    });

});