@progressio_resources/gravity-design-system 3.0.2 → 3.0.3

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.sass

@@ -38,6 +38,20 @@
   border-width: 5px
   border-color: var(--bg-tooltip-primary) transparent transparent transparent
 
+\:host.tooltip-top-left::after
+  top: 100%
+  left: 10%
+  margin-left: -5px
+  border-width: 5px
+  border-color: var(--bg-tooltip-primary) transparent transparent transparent
+
+\:host.tooltip-top-right::after
+  top: 100%
+  left: 90%
+  margin-left: -5px
+  border-width: 5px
+  border-color: var(--bg-tooltip-primary) transparent transparent transparent
+
 \:host.tooltip-bottom::after
   bottom: 100%
   left: 50%
@@ -45,6 +59,20 @@
   border-width: 5px
   border-color: transparent transparent var(--bg-tooltip-primary) transparent
 
+\:host.tooltip-bottom-left::after
+  bottom: 100%
+  left: 10%
+  margin-left: -5px
+  border-width: 5px
+  border-color: transparent transparent var(--bg-tooltip-primary) transparent
+
+\:host.tooltip-bottom-right::after
+  bottom: 100%
+  left: 90%
+  margin-left: -5px
+  border-width: 5px
+  border-color: transparent transparent var(--bg-tooltip-primary) transparent
+
 \:host.tooltip-left::after
   top: 50%
   left: 100%
@@ -52,6 +80,20 @@
   border-width: 5px
   border-color: transparent transparent transparent var(--bg-tooltip-primary)
 
+\:host.tooltip-left-top::after
+    top: 10%
+    left: 100%
+    margin-top: -5px
+    border-width: 5px
+    border-color: transparent transparent transparent var(--bg-tooltip-primary)
+
+\:host.tooltip-left-bottom::after
+  top: 90%
+  left: 100%
+  margin-top: -5px
+  border-width: 5px
+  border-color: transparent transparent transparent var(--bg-tooltip-primary)
+
 \:host.tooltip-right::after
   top: 50%
   right: 100%
@@ -59,6 +101,20 @@
   border-width: 5px
   border-color: transparent var(--bg-tooltip-primary) transparent transparent
 
+\:host.tooltip-right-top::after
+  top: 10%
+  right: 100%
+  margin-top: -5px
+  border-width: 5px
+  border-color: transparent var(--bg-tooltip-primary) transparent transparent
+
+\:host.tooltip-right-bottom::after
+  top: 90%
+  right: 100%
+  margin-top: -5px
+  border-width: 5px
+  border-color: transparent var(--bg-tooltip-primary) transparent transparent
+
 // Light
 \:host.tooltip-light::after
   display: none

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.ts

@@ -90,7 +90,7 @@ export class GravityTooltipComponent implements OnInit {
       return;
     } else {
       /* Is tooltip outside the visible area */
-      const placements = ['top', 'right', 'bottom', 'left'];
+      const placements = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-right', 'bottom-left', 'left', 'left-top', 'left-bottom'];
       let isPlacementSet;
 
       for (const placement of placements) {
@@ -133,28 +133,57 @@ export class GravityTooltipComponent implements OnInit {
     let topStyle;
     let leftStyle;
 
-    if (placement === 'top') {
-      topStyle = (this.elementPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset);
-    }
-
-    if (placement === 'bottom') {
-      topStyle = (this.elementPosition.top + scrollY) + elementHeight + this.tooltipOffset;
-    }
-
-    if (placement === 'top' || placement === 'bottom') {
-      leftStyle = (this.elementPosition.left + elementWidth / 2) - tooltipWidth / 2;
-    }
-
-    if (placement === 'left') {
-      leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
-    }
-
-    if (placement === 'right') {
-      leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
-    }
-
-    if (placement === 'left' || placement === 'right') {
-      topStyle = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltip.clientHeight / 2;
+    switch (placement) {
+      case 'top':
+        topStyle = (this.elementPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset);
+        leftStyle = (this.elementPosition.left + elementWidth / 2) - tooltipWidth / 2;
+        break;
+      case 'top-left':
+        topStyle = (this.elementPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset);
+        leftStyle = (this.elementPosition.left + elementWidth / 2) - (tooltipWidth * 0.1);
+        break;
+      case 'top-right':
+        topStyle = (this.elementPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset);
+        leftStyle = (this.elementPosition.left + elementWidth / 2) - (tooltipWidth * 0.9);
+        break;
+      case 'bottom':
+        topStyle = (this.elementPosition.top + scrollY) + elementHeight + this.tooltipOffset;
+        leftStyle = (this.elementPosition.left + elementWidth / 2) - tooltipWidth / 2;
+        break;
+      case 'bottom-left':
+        topStyle = (this.elementPosition.top + scrollY) + elementHeight + this.tooltipOffset;
+        leftStyle = (this.elementPosition.left + elementWidth / 2) - (tooltipWidth * 0.1);
+        break;
+      case 'bottom-right':
+        topStyle = (this.elementPosition.top + scrollY) + elementHeight + this.tooltipOffset;
+        leftStyle = (this.elementPosition.left + elementWidth / 2) - (tooltipWidth * 0.9);
+        break;
+      case 'left':
+        leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
+        topStyle = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltipHeight / 2;
+        break;
+      case 'left-top':
+        leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
+        topStyle = (this.elementPosition.top + scrollY + elementHeight / 2) - (tooltipHeight * 0.1);
+        break;
+      case 'left-bottom':
+        leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
+        topStyle = (this.elementPosition.top + scrollY + elementHeight / 2) - (tooltipHeight * 0.9);
+        break;
+      case 'right':
+        leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
+        topStyle = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltipHeight / 2;
+        break;
+      case 'right-top':
+        leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
+        topStyle = (this.elementPosition.top + scrollY + elementHeight / 2) - (tooltipHeight * 0.1);
+        break;
+      case 'right-bottom':
+        leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
+        topStyle = (this.elementPosition.top + scrollY + elementHeight / 2) - (tooltipHeight * 0.9);
+        break;
+      default:
+        return false;
     }
 
     /* Is tooltip outside the visible area */