add enhanced positioning to popover

twbs · Apr 24, 2017 · de3b266 · de3b266
1 parent aa937f3
commit de3b266
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 4 deletions.
diff --git a/docs/components/popovers.md b/docs/components/popovers.md
@@ -218,6 +218,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>'right'</td>
       <td>
         <p>How to position the popover - top | bottom | left | right.</p>
+        <p>You may pass a secondary alignment, separated with a space. Example: <code>'top left'</code> or <code>'right bottom'</code>. if secondary alignment is not supplied, popover will be aligned to the target's center.</p>
         <p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p>
       </td>
     </tr>

diff --git a/scss/_popover.scss b/scss/_popover.scss
@@ -22,7 +22,7 @@
   // Popover directions
 
   &.popover-top,
-  &.bs-tether-element-attached-bottom {
+  &.bs-tether-element-attached-bottom.bs-tether-target-attached-top {
     margin-top: -$popover-arrow-width;
 
     &::before,
@@ -42,10 +42,28 @@
       margin-left: -$popover-arrow-width;
       border-top-color: $popover-arrow-color;
     }
+
+    &.bs-tether-element-attached-left {
+      &::before,
+      &::after {
+        left: $popover-arrow-outer-width * 2;
+      }
+    }
+
+    &.bs-tether-element-attached-right {
+      &::before {
+        right: $popover-arrow-outer-width - 1;
+        left: initial;
+      }
+      &::after {
+        right: $popover-arrow-outer-width;
+        left: initial;
+      }
+    }
   }
 
   &.popover-right,
-  &.bs-tether-element-attached-left {
+  &.bs-tether-element-attached-left.bs-tether-target-attached-right {
     margin-left: $popover-arrow-width;
 
     &::before,
@@ -65,10 +83,29 @@
       margin-top: -($popover-arrow-outer-width - 1);
       border-right-color: $popover-arrow-color;
     }
+
+    &.bs-tether-element-attached-top {
+      &::before,
+      &::after {
+        top: $popover-arrow-outer-width * 2;
+      }
+    }
+
+    &.bs-tether-element-attached-bottom {
+      &::before {
+        top: initial;
+        bottom: $popover-arrow-outer-width - 1;
+      }
+      &::after {
+        top: initial;
+        bottom: $popover-arrow-outer-width;
+      }
+    }
+
   }
 
   &.popover-bottom,
-  &.bs-tether-element-attached-top {
+  &.bs-tether-element-attached-top.bs-tether-target-attached-bottom {
     margin-top: $popover-arrow-width;
 
     &::before,
@@ -89,6 +126,24 @@
       border-bottom-color: $popover-arrow-color;
     }
 
+    &.bs-tether-element-attached-left {
+      &::before,
+      &::after {
+        left: $popover-arrow-outer-width * 2;
+      }
+    }
+
+    &.bs-tether-element-attached-right {
+      &::before {
+        right: $popover-arrow-outer-width - 1;
+        left: initial;
+      }
+      &::after {
+        right: $popover-arrow-outer-width;
+        left: initial;
+      }
+    }
+
     // This will remove the popover-title's border just below the arrow
     .popover-title::before {
       position: absolute;
@@ -103,7 +158,7 @@
   }
 
   &.popover-left,
-  &.bs-tether-element-attached-right {
+  &.bs-tether-element-attached-right.bs-tether-target-attached-left {
     margin-left: -$popover-arrow-width;
 
     &::before,
@@ -123,6 +178,24 @@
       margin-top: -($popover-arrow-outer-width - 1);
       border-left-color: $popover-arrow-color;
     }
+
+    &.bs-tether-element-attached-top {
+      &::before,
+      &::after {
+        top: $popover-arrow-outer-width * 2;
+      }
+    }
+
+    &.bs-tether-element-attached-bottom {
+      &::before {
+        top: initial;
+        bottom: $popover-arrow-outer-width - 1;
+      }
+      &::after {
+        top: initial;
+        bottom: $popover-arrow-outer-width;
+      }
+    }
   }
 }