popover first draft

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by veloper

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<div style="padding:50px">
    <div class="popover fade right in" style="width:450px; top: 36.5px; left: 94px; display: block; ">
        <div class="arrow"></div>
        <div class="popover-inner">
            <h3 class="popover-subtitle"><i class="icon-wrench"></i> General</h3>
            <div class="popover-content">
                <strong>Class:</strong> ClientDomainApproval
            </div>
            <h3 class="popover-subtitle"><i class="icon-ok"></i> Validations <span class="pull-right"><i class="icon-plus"></i></span></h3>
            <div class="popover-content">
                <ul>
                    <li>Name is present.</li>
                    <li>Name is between 10 and 30 characters long.</li>
                    <li>Age is &gt; 21</li>
                </ul>
            </div>
            <h3 class="popover-subtitle"><i class="icon-list"></i> Properties <span class="pull-right"><i class="icon-plus"></i></span></h3>
            <div class="popover-content">
              <table class="table table-str table-condensed">
              <tbody>
                <tr>
                  <td>id</td>
                  <td>Primary Key</td> 
                  <td></td>
                  <td width="14"><i class="icon-pencil"></i></td>
                </tr>
                <tr>
                  <td>name</td>
                  <td>String <sup>32</sup></td>
                  <td style="color:gray"><em>John Doe</em></td>
                  <td></td>
                </tr>
                <tr>
                  <td>age</td>
                  <td>Integer</td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td>cost</td>
                  <td>Decimal <sup>10, 6</sup></td>
                  <td></td>
    ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

sup {
  font-style:italic;
}
.popover-content ul {
    margin:0 0 10px;
    padding:0;
}
.popover-subtitle span:hover {
    background-color:#A7A7A7;
}
.popover-subtitle span {
    position:absolute;
    cursor:pointer;
    top:-2px;
    right:0;
    padding:6px 8px 8px 9px;
    border-left:3px solid white;
    border-top:2px solid white;
    border-bottom:2px solid white;
    border-radius:16px;
    background-color:#C4C4C4;
}
.popover-subtitle {
    position:relative;
    padding:6px 12px 8px 10px;
    margin-bottom:5px;
    background-color:#DFF3FF;
    font-size:14px;
    line-height:1;
    border-radius:15px;
    margin:5px;
    background: rgb(239,239,239); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(239,239,239,1) 0%, rgba(211,211,211,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,239,239,1)), color-stop(100%,rgba(211,211,211,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(239,239,239,1) 0%,rgba(211,211,211,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(239,239,239,1) 0%,rgba(211,211,211,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(239,239,239,1) 0%,rgba(211,211,211,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(239,239,239,1) 0%,rgba(211,211,211,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */


}
.container {
    margin-top: 10px;
}
.popover table {
  margin:0;
  padding:0;
}
.popover tbody tr.first td {
    border-top:0px
}
.popover .arrow {
    top:46px !important;
}

JavaScript

var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};

$( "tbody" ).sortable({
    handle:'td',
    helper:fixHelper
}).disableSelection();