Generic Schedule Item

Note the libraries

by Andy Novocin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<link rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="uWrapper" draggable="true">
    <div class="itemUWrap">
        <div class="item">
            <span class="glyphicon glyphicon-search tools btn-primary zoomIn" data-toggle="tooltip" data-placement="bottom" title="Scan zoomed pictures"></span>
            <span class="glyphicon glyphicon-remove tools btn-danger removeMe"></span>
            <span class="glyphicon glyphicon-pencil tools btn-warning describeMe" data-toggle="tooltip" data-placement="top" title="Quick edit screen"></span>
            <span class="glyphicon glyphicon glyphicon-arrow-right tools btn-success scheduleMe" data-toggle="tooltip" data-placement="top" title="Schedule this next"></span>
            <div class="iPicWrap popover-dismiss" data-toggle="popover" title="Vintage Artisan Wall Plaque Copper Sheet Sculpture Eagle Relief Ben Ketchan" data-content='Titled "Protect What You Have" Signed By The Artist!'> 
                <img class="iPic" src="http://201403.estateauctionpics.com/20140307085307_2_t.jpg"/>
            </div>
            <p class="iTitle" data-toggle="tooltip" data-placement="bottom" title="Vintage Artisan Wall Plaque Copper Sheet Sculpture Eagle Relief Ben Ketchan">Vintage Artisan Wall Plaque Copper Sheet Sculpture Eagle Relief Ben Ketchan</p>
<!--            <p class="iSubtitle">Titled "Protect What You Have" Signed By The Artist!</p>
            <p class="iSource">Estate Auctions</p>
            <p class="iDescriber">Described by someone</p>-->
        </div>
    </div>
</div>

CSS

#popInfo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1001;
  zoom: 150%;
}

.message.bold {
  font-weight:bold;
  color:#000000;
  border: 1px ridge #FF0A0A;
  letter-spacing:0pt;
  word-spacing:2pt;
  font-size:2em;
  text-align:center;
  font-family:tahoma, verdana, arial, sans-serif;
  line-height:1;
}

#popConditions {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 1001;
  zoom: 150%;
}

.photos-displayed .selected{
  border: .1em solid LightSkyBlue;
}

.pop-img {
  zoom: 150%;
}

.pop-img.mini {
  position: absolute;
  right: 0;
  top: 3em;
  z-index: 2001;
}

.smaller-img {
  zoom: 150%;
}

.larger-img {
  zoom: 150%;
}

.smaller-img.mini {
  position: absolute;
  right: 0;
  top: 1.5em;
  z-index: 2001;
}

.larger-img.mini {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2001;
}

.caption{
  background: white;
  position: absolute;
  top: 0;
  right: 0;
  -moz-opacity: 0.9;
  opacity: .90;
  z-index:1001;
}

.caption.original{
  background: white;
  position: absolute;
  color: maroon;
  top: 1.5em;
  right: 0;
  -moz-opacity: 0.9;
  opacity: .90;
  z-index:1001;
}


.toNext{
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  -moz-opacity: 0.9;
  opacity: .90;
  z-index:1001;
}

.toFront{
  background: white;
  position: absolute;
  bottom: 0;
  left: 0;
  -moz-opacity: 0.9;
  opacity: .90;
  z-index:1001;
}

.toBack{
  background: white;
  position: absolute;
  bottom: 1.5em;
  left: 0;
  -moz-opacity: 0.9;
  opacity: .90;
  z-index:1001;
}

.toRemove{
  background: white;
  position: absolute;
  bottom: 0;
  right: 0;
  -moz-opacity: 0.9;
  opacity: .90;
  z-index:1001;
}

.black_overlay{
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index:1002;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

.white_content {
  display: none;
  position: fixed;
  top: 10%;
  left: 10%;
  width: 70%;
  height: 70%;
  padding:...

JavaScript

$(".iTitle").tooltip({delay: {show: 20, hide: 20}});
$(".zoomIn").tooltip({delay: {show: 200, hide: 20}});
$(".describeMe").tooltip({delay: {show: 200, hide: 20}});
$(".scheduleMe").tooltip({delay: {show: 200, hide: 20}, template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner scheduleTip"></div></div>'});
$('.popover-dismiss').popover({
  trigger: 'click focus',
    container: 'body'
});