feat(tooltip): Added exotic positions left-top, left-bottom, right-top, right-bottom

Author: lskramarov

src/tooltip/test/tooltip.spec.js

@@ -96,6 +96,18 @@ describe('tooltip', function() {
     'options-placement-exotic-bottom-right': {
       element: '<a data-placement="bottom-right" bs-tooltip="tooltip" data-viewport="null">hover me</a>'
     },
+    'options-placement-exotic-right-top': {
+      element: '<a data-placement="right-top" bs-tooltip="tooltip" data-viewport="null">hover me</a>'
+    },
+    'options-placement-exotic-right-bottom': {
+      element: '<a data-placement="right-bottom" bs-tooltip="tooltip" data-viewport="null">hover me</a>'
+    },
+    'options-placement-exotic-left-top': {
+      element: '<a data-placement="left-top" bs-tooltip="tooltip" data-viewport="null">hover me</a>'
+    },
+    'options-placement-exotic-left-bottom': {
+      element: '<a data-placement="left-bottom" bs-tooltip="tooltip" data-viewport="null">hover me</a>'
+    },
     'options-placement-auto': {
       element: '<a data-placement="auto" bs-tooltip="tooltip" data-viewport="null">hover me</a>'
     },
@@ -768,7 +780,7 @@ describe('tooltip', function() {
 
           $$rAF.flush();
           expect(sandboxEl.children('.tooltip').hasClass('top')).toBeTruthy();
-        })
+        });
 
         it('should remove `auto` from exotic placements when auto positioning', function () {
           var elm = compileDirective('options-placement-auto-exotic-top-left');
@@ -780,7 +792,7 @@ describe('tooltip', function() {
 
           $$rAF.flush();
           expect(sandboxEl.children('.tooltip').hasClass('bottom-right')).toBeTruthy();
-        })
+        });
 
         it('should default to `top` when `auto` placement is set without a preference', function () {
           var elm = compileDirective('options-placement-auto');
@@ -978,7 +990,7 @@ describe('tooltip', function() {
         placements[placement] = {
           top: tipElement.style.top,
           left: tipElement.style.left,
-        }
+        };
 
         // Clear the sandbox after we've rendered
         // each tooltip
@@ -989,7 +1001,7 @@ describe('tooltip', function() {
       }
 
       return placements;
-    };
+    }
 
     var standardPlacements,
         autoPlacements,
@@ -1012,6 +1024,10 @@ describe('tooltip', function() {
         'options-placement-exotic-top-right': {},
         'options-placement-exotic-bottom-left': {},
         'options-placement-exotic-bottom-right': {},
+        'options-placement-exotic-right-top': {},
+        'options-placement-exotic-right-bottom': {},
+        'options-placement-exotic-left-top': {},
+        'options-placement-exotic-left-bottom': {}
       }, styleEl);
 
       autoPlacements = calculatePlacements({
@@ -1022,7 +1038,7 @@ describe('tooltip', function() {
         'options-placement-auto-exotic-top-left': {},
         'options-placement-auto-exotic-top-right': {},
         'options-placement-auto-exotic-bottom-left': {},
-        'options-placement-auto-exotic-bottom-right': {},
+        'options-placement-auto-exotic-bottom-right': {}
       }, styleEl);
 
       // Change the style for viewport testing
@@ -1043,7 +1059,7 @@ describe('tooltip', function() {
         'options-placement-viewport-bottom': {},
         'options-placement-viewport-left': {},
         'options-placement-viewport-padding': {},
-        'options-placement-viewport-exotic': {},
+        'options-placement-viewport-exotic': {}
       }, styleEl);
     });
 
@@ -1130,6 +1146,34 @@ describe('tooltip', function() {
         expect(placement.top).toBe('20px');
         expect(placement.left).toBe('-180px');
       });
+
+      it('should position the tooltip to the left-top of the target when placement is `left-top`', function () {
+        var placement = standardPlacements['options-placement-exotic-left-top'];
+
+        expect(placement.top).toBe('-80px');
+        expect(placement.left).toBe('-200px');
+      });
+
+      it('should position the tooltip to the left-bottom of the target when placement is `left-bottom`', function () {
+        var placement = standardPlacements['options-placement-exotic-left-bottom'];
+
+        expect(placement.top).toBe('0px');
+        expect(placement.left).toBe('-200px');
+      });
+
+      it('should position the tooltip to the right-top of the target when placement is `right-top`', function () {
+        var placement = standardPlacements['options-placement-exotic-right-top'];
+
+        expect(placement.top).toBe('-80px');
+        expect(placement.left).toBe('20px');
+      });
+
+      it('should position the tooltip to the right-bottom of the target when placement is `right-bottom`', function () {
+        var placement = standardPlacements['options-placement-exotic-right-bottom'];
+
+        expect(placement.top).toBe('0px');
+        expect(placement.left).toBe('20px');
+      });
     });
 
     describe('auto placements', function () {
@@ -1138,7 +1182,7 @@ describe('tooltip', function() {
         var bottom = standardPlacements['options-placement-bottom'];
 
         // top is offscreen, so it should swap to bottom and match the standard bottom
-        expect(autoTop.top).toBe(bottom.top)
+        expect(autoTop.top).toBe(bottom.top);
         expect(autoTop.left).toBe(bottom.left)
       });
 
@@ -1147,7 +1191,7 @@ describe('tooltip', function() {
         var left = standardPlacements['options-placement-left'];
 
         // right is offscreen, so it should swap to left and match the standard left
-        expect(autoRight.top).toBe(left.top)
+        expect(autoRight.top).toBe(left.top);
         expect(autoRight.left).toBe(left.left)
       });
 
@@ -1156,7 +1200,7 @@ describe('tooltip', function() {
         var top = standardPlacements['options-placement-top'];
 
         // bottom is offscreen, so it should swap to top and match the standard top
-        expect(autoBottom.top).toBe(top.top)
+        expect(autoBottom.top).toBe(top.top);
         expect(autoBottom.left).toBe(top.left)
       });
 
@@ -1165,7 +1209,7 @@ describe('tooltip', function() {
         var right = standardPlacements['options-placement-right'];
 
         // left is offscreen, so it should swap to right and match the standard right
-        expect(autoLeft.top).toBe(right.top)
+        expect(autoLeft.top).toBe(right.top);
         expect(autoLeft.left).toBe(right.left)
       });
 
@@ -1174,7 +1218,7 @@ describe('tooltip', function() {
         var bottomLeft = standardPlacements['options-placement-exotic-bottom-left'];
 
         // should swap to bottom-left and match the standard bottom-left
-        expect(autoTopRight.top).toBe(bottomLeft.top)
+        expect(autoTopRight.top).toBe(bottomLeft.top);
         expect(autoTopRight.left).toBe(bottomLeft.left)
       });
 
@@ -1183,7 +1227,7 @@ describe('tooltip', function() {
         var bottomRight = standardPlacements['options-placement-exotic-bottom-right'];
 
         // should swap to bottom-right and match the standard bottom-right
-        expect(autoTopLeft.top).toBe(bottomRight.top)
+        expect(autoTopLeft.top).toBe(bottomRight.top);
         expect(autoTopLeft.left).toBe(bottomRight.left)
       });
 
@@ -1192,7 +1236,7 @@ describe('tooltip', function() {
         var topLeft = standardPlacements['options-placement-exotic-top-left'];
 
         // should swap to top-left and match the standard top-left
-        expect(autoBottomRight.top).toBe(topLeft.top)
+        expect(autoBottomRight.top).toBe(topLeft.top);
         expect(autoBottomRight.left).toBe(topLeft.left)
       });
 
@@ -1201,7 +1245,7 @@ describe('tooltip', function() {
         var topRight = standardPlacements['options-placement-exotic-top-right'];
 
         // should swap to top-right and match the standard top-right
-        expect(autoBottomLeft.top).toBe(topRight.top)
+        expect(autoBottomLeft.top).toBe(topRight.top);
         expect(autoBottomLeft.left).toBe(topRight.left)
       });
     });

src/tooltip/tooltip.js

@@ -357,24 +357,16 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap
             var originalPlacement = placement;
             var viewportPosition = getPosition($tooltip.$viewport);
 
-            // Determine if the vertical placement
-            if (originalPlacement.indexOf('bottom') >= 0 && elementPosition.bottom + tipHeight > viewportPosition.bottom) {
-              placement = originalPlacement.replace('bottom', 'top');
-            } else if (originalPlacement.indexOf('top') >= 0 && elementPosition.top - tipHeight < viewportPosition.top) {
+            if (/top/.test(originalPlacement) && elementPosition.bottom + tipHeight > viewportPosition.bottom) {
               placement = originalPlacement.replace('top', 'bottom');
+            } else if (/bottom/.test(originalPlacement) && elementPosition.top - tipHeight < viewportPosition.top) {
+              placement = originalPlacement.replace('bottom', 'top');
             }
 
-            // Determine the horizontal placement
-            // The exotic placements of left and right are opposite of the standard placements.  Their arrows are put on the left/right
-            // and flow in the opposite direction of their placement.
-            if ((originalPlacement === 'right' || originalPlacement === 'bottom-left' || originalPlacement === 'top-left') &&
-                elementPosition.right + tipWidth > viewportPosition.width) {
-
-              placement = originalPlacement === 'right' ? 'left' : placement.replace('left', 'right');
-            } else if ((originalPlacement === 'left' || originalPlacement === 'bottom-right' || originalPlacement === 'top-right') &&
-                elementPosition.left - tipWidth < viewportPosition.left) {
-
-              placement = originalPlacement === 'left' ? 'right' : placement.replace('right', 'left');
+            if (/left/.test(originalPlacement) && elementPosition.left - tipWidth < viewportPosition.left) {
+              placement = placement.replace('left', 'right');
+            } else if (/right/.test(originalPlacement) && elementPosition.right + tipWidth > viewportPosition.width) {
+              placement = placement.replace('right', 'left');
             }
 
             tipElement.removeClass(originalPlacement).addClass(placement);
@@ -552,11 +544,11 @@ angular.module('mgcrea.ngStrap.tooltip', ['mgcrea.ngStrap.core', 'mgcrea.ngStrap
             }
           } else if(split[0] === 'left' || split[0] === 'right') {
             switch (split[1]) {
-            case 'top':
-              offset.top = position.top - actualHeight;
-              break;
-            case 'bottom':
-              offset.top = position.top + position.height;
+              case 'top':
+                offset.top = position.top - actualHeight + position.height;
+                break;
+              case 'bottom':
+                offset.top = position.top;
             }
           }