fixes #5173: proper popover offsets; added docs examples to enable tests in the future

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 201d1f8426b67b16fd5a52015e65ce1c92b5c10c..0538e4b01a9e1c0fe390b8eb44e2dd6c241fabc1 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5109,7 +5109,7 @@ input[type="submit"].btn.btn-mini {
 }
 
 .popover.top {
-  margin-bottom: 10px;
+  margin-top: -10px;
 }
 
 .popover.right {
@@ -5121,7 +5121,7 @@ input[type="submit"].btn.btn-mini {
 }
 
 .popover.left {
-  margin-right: 10px;
+  margin-left: -10px;
 }
 
 .popover-title {

diff --git a/docs/javascript.html b/docs/javascript.html
index a0c707b8d3318149e9f70688afc08adff3f8b41d..6c028e01e5ca077462397cba885dd36253ba5026 100644 (file)
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -925,6 +925,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
         </div>
 
+        <h4>Four directions</h4>
+        <div class="bs-docs-example tooltip-demo">
+          <ul class="bs-docs-tooltip-examples">
+            <li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
+            <li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
+            <li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
+            <li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
+          </ul>
+        </div>
+
 
         <hr class="bs-docs-separator">
 

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 2cdb172db51c5765c34217e027c22497bb83fa1a..b707ebe20e6cba1805daa63a8189a1f662e41748 100644 (file)
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -855,6 +855,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Click to toggle popover{{/i}}</a>
         </div>
 
+        <h4>{{_i}}Four directions{{/i}}</h4>
+        <div class="bs-docs-example tooltip-demo">
+          <ul class="bs-docs-tooltip-examples">
+            <li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
+            <li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
+            <li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
+            <li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
+          </ul>
+        </div>{{! /example }}
+
 
         <hr class="bs-docs-separator">
 

diff --git a/less/popovers.less b/less/popovers.less
index 2b3f1b059956b337dad93eab3644d835854557a7..a4c4bb0e07b9993603247723c1ab5a5907914c51 100644 (file)
--- a/less/popovers.less
+++ b/less/popovers.less
@@ -21,10 +21,10 @@
   .box-shadow(0 5px 10px rgba(0,0,0,.2));
 
   // Offset the popover to account for the popover arrow
-  &.top     { margin-bottom: 10px; }
+  &.top     { margin-top: -10px; }
   &.right   { margin-left: 10px; }
   &.bottom  { margin-top: 10px; }
-  &.left    { margin-right: 10px; }
+  &.left    { margin-left: -10px; }
 
 }