Expand positioning options for tooltips

twbs · Apr 13, 2017 · 67a2718 · 67a2718
1 parent 1f80f61
commit 67a2718
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 10 deletions.
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
@@ -196,6 +196,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>'top'</td>
       <td>
         <p>How to position the tooltip - 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, tooltip will be aligned to the target's center.</p>
         <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
       </td>
     </tr>

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
@@ -65,11 +65,23 @@ const Tooltip = (($) => {
     container   : '(string|element|boolean)'
   }
 
+  // Mapping attachment-point of tooltip element and target element, respectively
   const AttachmentMap = {
-    TOP    : 'bottom center',
-    RIGHT  : 'middle left',
-    BOTTOM : 'top center',
-    LEFT   : 'middle right'
+    TOP             : ['bottom center', 'top center'],
+    'TOP LEFT'      : ['bottom left', 'top left'],
+    'TOP RIGHT'     : ['bottom right', 'top right'],
+
+    RIGHT           : ['middle left', 'middle right'],
+    'RIGHT TOP'     : ['top left', 'top right'],
+    'RIGHT BOTTOM'  : ['bottom left', 'bottom right'],
+
+    BOTTOM          : ['top center', 'bottom center'],
+    'BOTTOM LEFT'   : ['top left', 'bottom left'],
+    'BOTTOM RIGHT'  : ['top right', 'bottom right'],
+
+    LEFT            : ['middle right', 'middle left'],
+    'LEFT TOP'      : ['top right', 'top left'],
+    'LEFT BOTTOM'   : ['bottom right', 'bottom left']
   }
 
   const HoverState = {
@@ -289,7 +301,8 @@ const Tooltip = (($) => {
         $(this.element).trigger(this.constructor.Event.INSERTED)
 
         this._tether = new Tether({
-          attachment,
+          attachment      : attachment.tooltipElement,
+          targetAttachment: attachment.targetElement,
           element         : tip,
           target          : this.element,
           classes         : TetherClass,
@@ -429,7 +442,12 @@ const Tooltip = (($) => {
     // private
 
     _getAttachment(placement) {
-      return AttachmentMap[placement.toUpperCase()]
+      const mapping = AttachmentMap[placement.toUpperCase()]
+
+      return {
+        tooltipElement: mapping[0],
+        targetElement: mapping[1]
+      }
     }
 
     _cleanTipClass() {

diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
@@ -14,7 +14,7 @@
   &.show { opacity: $tooltip-opacity; }
 
   &.tooltip-top,
-  &.bs-tether-element-attached-bottom {
+  &.bs-tether-element-attached-bottom.bs-tether-target-attached-top {
     padding: $tooltip-arrow-width 0;
     margin-top: -$tooltip-margin;
 
@@ -26,9 +26,20 @@
       border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
       border-top-color: $tooltip-arrow-color;
     }
+
+    &.bs-tether-element-attached {
+      &-left .tooltip-inner::before {
+        left: $tooltip-arrow-width * 3;
+      }
+
+      &-right .tooltip-inner::before {
+        right: $tooltip-arrow-width * 2;
+        left: inherit;
+      }
+    }
   }
   &.tooltip-right,
-  &.bs-tether-element-attached-left {
+  &.bs-tether-element-attached-left.bs-tether-target-attached-right {
     padding: 0 $tooltip-arrow-width;
     margin-left: $tooltip-margin;
 
@@ -40,9 +51,20 @@
       border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
       border-right-color: $tooltip-arrow-color;
     }
+
+    &.bs-tether-element-attached {
+      &-top .tooltip-inner::before {
+        top: $tooltip-arrow-width * 3;
+      }
+
+      &-bottom .tooltip-inner::before {
+        top: inherit;
+        bottom: $tooltip-arrow-width * 2;
+      }
+    }
   }
   &.tooltip-bottom,
-  &.bs-tether-element-attached-top {
+  &.bs-tether-element-attached-top.bs-tether-target-attached-bottom {
     padding: $tooltip-arrow-width 0;
     margin-top: $tooltip-margin;
 
@@ -54,9 +76,21 @@
       border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-bottom-color: $tooltip-arrow-color;
     }
+
+    &.bs-tether-element-attached {
+      &-left .tooltip-inner::before {
+        left: $tooltip-arrow-width * 3;
+      }
+
+      &-right .tooltip-inner::before {
+        right: $tooltip-arrow-width * 2;
+        left: inherit;
+      }
+    }
   }
+
   &.tooltip-left,
-  &.bs-tether-element-attached-right {
+  &.bs-tether-element-attached-right.bs-tether-target-attached-left {
     padding: 0 $tooltip-arrow-width;
     margin-left: -$tooltip-margin;
 
@@ -68,6 +102,17 @@
       border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-left-color: $tooltip-arrow-color;
     }
+
+    &.bs-tether-element-attached {
+      &-top .tooltip-inner::before {
+        top: $tooltip-arrow-width * 3;
+      }
+
+      &-bottom .tooltip-inner::before {
+        top: inherit;
+        bottom: $tooltip-arrow-width * 2;
+      }
+    }
   }
 }