getting popovers in

5 files changed, 411 insertions, 52 deletions

diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css
index 71a3cc9e74..53e0b6a649 100644
--- a/bootstrap-1.0.0.css
+++ b/bootstrap-1.0.0.css
@@ -1617,7 +1617,7 @@ div.twipsy.above .twipsy-arrow {
   margin-left: -5px;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 5px solid #000;
+  border-top: 5px solid #000000;
 }
 div.twipsy.left .twipsy-arrow {
   top: 50%;
@@ -1625,7 +1625,7 @@ div.twipsy.left .twipsy-arrow {
   margin-top: -5px;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
-  border-left: 5px solid #000;
+  border-left: 5px solid #000000;
 }
 div.twipsy.below .twipsy-arrow {
   top: 0;
@@ -1633,7 +1633,7 @@ div.twipsy.below .twipsy-arrow {
   margin-left: -5px;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-bottom: 5px solid #000;
+  border-bottom: 5px solid #000000;
 }
 div.twipsy.right .twipsy-arrow {
   top: 50%;
@@ -1641,7 +1641,7 @@ div.twipsy.right .twipsy-arrow {
   margin-top: -5px;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
-  border-right: 5px solid #000;
+  border-right: 5px solid #000000;
 }
 div.twipsy .twipsy-inner {
   padding: 3px 8px;
@@ -1659,3 +1659,164 @@ div.twipsy .twipsy-arrow {
   width: 0;
   height: 0;
 }
+.popover-wrapper {
+  position: relative;
+}
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  display: none;
+}
+.popover-border {
+  background: rgba(0, 0, 0, 0.8);
+  padding: 5px;
+  overflow: hidden;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+}
+.popover-title {
+  padding: 5px 15px 10px;
+  color: #fff;
+  line-height: 1;
+}
+.popover-inner {
+  background-color: #fff;
+  overflow: hidden;
+  padding: 15px;
+  width: 200px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.popover-inner p, .popover-inner ul, .popover-inner ol {
+  margin-bottom: 0;
+}
+.popover2 {
+  padding: 5px;
+}
+.popover2 .inner {
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  width: 280px;
+}
+.popover2.above .arrow {
+  bottom: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #000000;
+}
+.popover2.right .arrow {
+  top: 50%;
+  left: 0;
+  margin-top: -5px;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-right: 5px solid #000000;
+}
+.popover2.below .arrow {
+  top: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #000000;
+}
+.popover2.left .arrow {
+  top: 50%;
+  right: 0;
+  margin-top: -5px;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid #000000;
+}
+.popover2 .arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+.popover2 .title {
+  background-color: #222222;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#444444), to(#222222));
+  background-image: -moz-linear-gradient(#444444, #222222);
+  background-image: -ms-linear-gradient(#444444, #222222);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #222222));
+  background-image: -webkit-linear-gradient(#444444, #222222);
+  background-image: -o-linear-gradient(#444444, #222222);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0)";
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0);
+  background-image: linear-gradient(#444444, #222222);
+  padding: 9px 15px;
+  color: #fff;
+  line-height: 1;
+  -webkit-border-radius: 6px 6px 0 0;
+  -moz-border-radius: 6px 6px 0 0;
+  border-radius: 6px 6px 0 0;
+}
+.popover2 .content {
+  background-color: #ffffff;
+  padding: 14px;
+  border: 1px solid #000000;
+  border-top: 0;
+  -webkit-border-radius: 0 0 6px 6px;
+  -moz-border-radius: 0 0 6px 6px;
+  border-radius: 0 0 6px 6px;
+  -webkit-background-clip: padding;
+  -moz-background-clip: padding;
+  background-clip: padding;
+}
+.popover2 .content p, .popover2 .content ul, .popover2 .content ol {
+  margin-bottom: 0;
+}
+.popover-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  z-index: 10000;
+  background: none;
+}
+.popover-menu .popover-arrow {
+  width: 100%;
+  height: 14px;
+  background: url(/blueprint/images/popover-menu-bottom.png) no-repeat bottom center;
+}
+.popover-menu .popover-border {
+  margin: 0 0 -3px;
+  padding: 2px;
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  overflow: hidden;
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+  -webkit-background-clip: padding;
+}
+.popover-menu .popover-inner {
+  background: #222;
+  padding: 7px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  width: 150px;
+}
+.popover-menu a {
+  color: #fff;
+  font-weight: bold;
+  padding: 5px 8px;
+}
diff --git a/bootstrap-1.0.0.min.css b/bootstrap-1.0.0.min.css
index fbc3b86df1..11fe0bcc8f 100644
--- a/bootstrap-1.0.0.min.css
+++ b/bootstrap-1.0.0.min.css
@@ -199,9 +199,27 @@ div.modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-280px
 div.modal .modal-body{padding:20px;}
 div.modal .modal-footer{background-color:#eee;padding:14px 20px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}div.modal .modal-footer:after{display:block;visibility:hidden;height:0;clear:both;content:".";}
 div.modal .modal-footer .btn{float:right;margin-left:10px;}
-div.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:100000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}div.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000;}
-div.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000;}
-div.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000;}
-div.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000;}
+div.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:100000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}div.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
+div.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
+div.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
+div.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
 div.twipsy .twipsy-inner{padding:3px 8px;background-color:#000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
 div.twipsy .twipsy-arrow{position:absolute;width:0;height:0;}
+.popover-wrapper{position:relative;}
+.popover{position:absolute;top:0;left:0;z-index:10000;display:none;}
+.popover-border{background:rgba(0, 0, 0, 0.8);padding:5px;overflow:hidden;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);-moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);}
+.popover-title{padding:5px 15px 10px;color:#fff;line-height:1;}
+.popover-inner{background-color:#fff;overflow:hidden;padding:15px;width:200px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.popover-inner p,.popover-inner ul,.popover-inner ol{margin-bottom:0;}
+.popover2{padding:5px;}.popover2 .inner{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);width:280px;}
+.popover2.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
+.popover2.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
+.popover2.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
+.popover2.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
+.popover2 .arrow{position:absolute;width:0;height:0;}
+.popover2 .title{background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#444444), to(#222222));background-image:-moz-linear-gradient(#444444, #222222);background-image:-ms-linear-gradient(#444444, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #222222));background-image:-webkit-linear-gradient(#444444, #222222);background-image:-o-linear-gradient(#444444, #222222);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0);background-image:linear-gradient(#444444, #222222);padding:9px 15px;color:#fff;line-height:1;-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;}
+.popover2 .content{background-color:#ffffff;padding:14px;border:1px solid #000000;border-top:0;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding;}.popover2 .content p,.popover2 .content ul,.popover2 .content ol{margin-bottom:0;}
+.popover-menu{position:absolute;top:0;left:0;display:none;z-index:10000;background:none;}
+.popover-menu .popover-arrow{width:100%;height:14px;background:url(/blueprint/images/popover-menu-bottom.png) no-repeat bottom center;}
+.popover-menu .popover-border{margin:0 0 -3px;padding:2px;background:rgba(255, 255, 255, 0.75);border:1px solid rgba(0, 0, 0, 0.5);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;overflow:hidden;-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);-moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);-webkit-background-clip:padding;}
+.popover-menu .popover-inner{background:#222;padding:7px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;width:150px;}
+.popover-menu a{color:#fff;font-weight:bold;padding:5px 8px;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 4a93d754b3..93c4f5b32a 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -224,4 +224,21 @@ div.topbar-wrapper div.topbar {
   padding-right: 20px;
   -moz-border-radius: 4px;
   border-radius: 4px;
+}
+
+/* Popover docs
+-------------------------------------------------- */
+div.popover-well {
+  min-height: 160px;
+}
+div.popover-well div.popover {
+  display: block;
+}
+div.popover-well div.popover-wrapper {
+  width: 50%;
+  height: 160px;
+  float: left;
+}
+div.popover-well div.popover-menu-wrapper {
+  height: 80px;
 }
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index ef5c7372a8..e5bb776e46 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1062,7 +1062,7 @@
   </div>
   <div class="row">
     <div class="span4 columns">
-      <h2>Example modal</h2>
+      <h2>Modals</h2>
       <p>Modals&mdash;dialogs or lightboxes&mdash;are great for contextual actions in situations where it's important that the background context be maintained.</p>
     </div>
     <div class="span12 columns">
@@ -1081,7 +1081,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> <!-- /row -->
     <div class="row">
       <div class="span4 columns">
         <h2>Tool Tips</h2>
@@ -1113,7 +1113,57 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
         </div>
       </div>
     </div>
-  </div>
+  </div> <!-- /row -->
+    
+  <div class="row">
+    <div class="span4 columns">
+      <h2>Popovers</h2>
+    </div>
+    <div class="span12 columns">
+      <div class="well popover-well">
+      
+        <div class="popover-wrapper">
+          <div class="popover above">
+            <div class="popover-border">
+              <h3 class="popover-title">Popover title</h3>
+              <div class="popover-inner">
+                <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      
+        <div class="popover-wrapper">
+          <div class="popover bottom popover2">
+            <div class="arrow"></div>
+            <div class="inner">
+              <h3 class="title">Popover title</h3>
+              <div class="content">
+                <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+      </div>
+      <div class="well popover-well popover-menu-well">
+        <div class="popover-wrapper">
+          <div class="popover popover-menu">
+            <div class="popover-border">
+              <div class="popover-inner">
+                <a href="">View</a>
+                <a href="">Edit</a>
+                <a href="">Delete</a>
+              </div>
+            </div>
+            <div class="popover-arrow"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div> <!-- /row -->
+    
+
 </section>
 
 
diff --git a/lib/patterns.less b/lib/patterns.less
index e966253f11..b264cb3c74 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -507,6 +507,45 @@ div.modal {
   }
 }
 
+
+// Popover Arrows
+// --------------
+
+#popoverArrow {
+  .above(@arrowWidth: 5px) {
+    bottom: 0;
+    left: 50%;
+    margin-left: -@arrowWidth;
+    border-left: @arrowWidth solid transparent;
+    border-right: @arrowWidth solid transparent;
+    border-top: @arrowWidth solid #000;
+  }
+  .left(@arrowWidth: 5px) {
+    top: 50%;
+    right: 0;
+    margin-top: -@arrowWidth;
+    border-top: @arrowWidth solid transparent;
+    border-bottom: @arrowWidth solid transparent;
+    border-left: @arrowWidth solid #000;
+  }
+  .below(@arrowWidth: 5px) {
+    top: 0;
+    left: 50%;
+    margin-left: -@arrowWidth;
+    border-left: @arrowWidth solid transparent;
+    border-right: @arrowWidth solid transparent;
+    border-bottom: @arrowWidth solid #000;
+  }
+  .right(@arrowWidth: 5px) {
+    top: 50%;
+    left: 0;
+    margin-top: -@arrowWidth;
+    border-top: @arrowWidth solid transparent;
+    border-bottom: @arrowWidth solid transparent;
+    border-right: @arrowWidth solid #000;
+  }
+}
+
 // Twipsy
 // ------
 
@@ -518,46 +557,10 @@ div.twipsy {
   font-size: 11px;
   z-index: 100000;
   .opacity(80);
-  &.above {
-    .twipsy-arrow {
-      bottom: 0;
-      left: 50%;
-      margin-left: -5px;
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top: 5px solid #000;
-    }
-  }
-  &.left {
-    .twipsy-arrow {
-      top: 50%;
-      right: 0;
-      margin-top: -5px;
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-left: 5px solid #000;
-    }
-  }
-  &.below {
-    .twipsy-arrow {
-      top: 0;
-      left: 50%;
-      margin-left: -5px;
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-bottom: 5px solid #000;
-    }
-  }
-  &.right {
-    .twipsy-arrow {
-      top: 50%;
-      left: 0;
-      margin-top: -5px;
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-right: 5px solid #000;
-    }
-  }
+  &.above .twipsy-arrow   { #popoverArrow > .above(); }
+  &.left .twipsy-arrow    { #popoverArrow > .left(); }
+  &.below .twipsy-arrow   { #popoverArrow > .below(); }
+  &.right .twipsy-arrow   { #popoverArrow > .right(); }
   .twipsy-inner {
     padding: 3px 8px;
     background-color: #000;
@@ -572,4 +575,114 @@ div.twipsy {
     width: 0;
     height: 0;
   }
-}
\ No newline at end of file
+}
+
+
+// Popovers
+// --------
+
+.popover-wrapper {
+  position: relative;
+}
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  display: none;
+}
+.popover-border {
+  background: rgba(0,0,0,.8);
+  padding: 5px;
+  overflow: hidden;
+  .border-radius(6px);
+  .box-shadow(0 3px 6px rgba(0,0,0,.25));
+}
+.popover-title {
+  padding: 5px 15px 10px;
+  color: #fff;
+  line-height: 1;
+}
+.popover-inner {
+  background-color: #fff;
+  overflow: hidden;
+  padding: 15px;
+  width: 200px;
+  .border-radius(3px);
+  p, ul, ol {
+    margin-bottom: 0;
+  }
+}
+
+.popover2 {
+  padding: 5px;
+  .inner {
+    .border-radius(6px);
+    .box-shadow(0 3px 7px rgba(0,0,0,0.3));
+    width: 280px;
+  }
+  &.above .arrow   { #popoverArrow > .above(); }
+  &.right .arrow   { #popoverArrow > .right(); }
+  &.below .arrow   { #popoverArrow > .below(); }
+  &.left .arrow   { #popoverArrow > .left(); }
+  .arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+  .title {
+    #gradient > .vertical(#444, #222);
+    padding: 9px 15px;
+    color: #fff;
+    line-height: 1;
+    .border-radius(6px 6px 0 0);
+  }
+  .content {
+    background-color: @white;
+    padding: 14px;
+    border: 1px solid rgba(0,0,0,1);
+    border-top: 0;
+    .border-radius(0 0 6px 6px);
+    .background-clip(padding);
+    p, ul, ol {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Alt popover for menus
+.popover-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  z-index: 10000;
+  background: none;
+}
+.popover-menu .popover-arrow {
+  width: 100%;
+  height: 14px;
+  background: url(/blueprint/images/popover-menu-bottom.png) no-repeat bottom center;
+}
+.popover-menu .popover-border {
+  margin: 0 0 -3px;
+  padding: 2px;
+  background: rgba(255,255,255,.75);
+  border: 1px solid rgba(0,0,0,.5);
+  .border-radius(6px);
+  overflow: hidden;
+  .box-shadow(0 3px 6px rgba(0,0,0,.25));
+  -webkit-background-clip: padding;
+}
+.popover-menu .popover-inner {
+  background: #222;
+  padding: 7px;
+  .border-radius(4px);
+  width: 150px;
+}
+
+.popover-menu a {
+  color: #fff;
+  font-weight: bold;
+  padding: 5px 8px;
+}