fix(tooltip): tooltip not in view support

sahil143 · sahil143 · commit 9b4fff50f3f9 · 2017-08-14T23:28:43.000+05:30
diff --git a/src/pf-tooltip/index.html b/src/pf-tooltip/index.html
@@ -5,6 +5,12 @@
     <link rel="stylesheet" href="../../dist/css/patternfly.css">
     <link rel="stylesheet" href="../../dist/css/patternfly-additions.css">
     <link rel="stylesheet" href="../../dist/css/patternfly-webcomponents.css">
+    <style>
+        .tooltip-wrapper-div {
+            margin-top: 40px;
+            margin-left: 20px;
+        }
+    </style>
 </head>
 <body>
 <div class="container">
@@ -13,25 +19,39 @@ <h1>Tooltips</h1>
     </div>
     <hr>
 
+    <pf-tooltip id="tooltip-left-nv" placement="left" target-selector="#btn-left-nv">
+        Tooltip text on Left but not in view
+    </pf-tooltip>
+    <button id="btn-left-nv" type="button" class="btn btn-primary" aria-describedby="tooltip-left-nv">Left</button>
+
+    <div style="margin-left: 200px;">
     <pf-tooltip id="tooltip-left" placement="left" target-selector="#btn-left">
         Tooltip text on Left
     </pf-tooltip>
     <button id="btn-left" type="button" class="btn btn-primary" aria-describedby="tooltip-left">Left</button>
+    </div>
 
+    <hr>
+    <div class="tooltip-wrapper-div">
     <pf-tooltip id="tooltip-top" placement="top" target-selector="#btn-top">
         <span>Tooltip on top</span>
     </pf-tooltip>
     <button id="btn-top" type="button" class="btn btn-secondary" aria-describedby="tooltip-top">Top</button>
+    </div>
 
+    <div class="tooltip-wrapper-div">
     <pf-tooltip id="tooltip-bottom" placement="bottom" target-selector="#btn-bottom">
         <span>Tooltip on bottom</span>
     </pf-tooltip>
     <button id="btn-bottom" type="button" class="btn btn-warning" aria-describedby="tooltip-bottom">Bottom</button>
+    </div>
 
+    <div class="tooltip-wrapper-div">
     <pf-tooltip id="tooltip-right" placement="right" target-selector="#btn-right">
         <span>Tooltip on right</span>
     </pf-tooltip>
     <button id="btn-right" type="button" class="btn btn-danger" aria-describedby="tooltip-right">Right</button>
+    </div>
 
     <br/>
     <br/>
diff --git a/src/pf-tooltip/pf-tooltip.component.js b/src/pf-tooltip/pf-tooltip.component.js
@@ -234,6 +234,7 @@ export class PfTooltip extends HTMLElement {
       if (this.tooltip === null) {
         this._createTooltip();
         this._styleTooltip();
+        this._checkPlacement();
         this._showTooltip();
         //notify frameworks
         this.dispatchEvent(new CustomEvent('pf-tooltip.opened', {}));
@@ -253,6 +254,8 @@ export class PfTooltip extends HTMLElement {
           this._removeTooltip();
           //notify frameworks
           this.dispatchEvent(new CustomEvent('pf-tooltip.closed', {}));
+          // reset position after tooltip is closed
+          this._placement = this.getAttribute('placement') ? this.getAttribute('placement') : 'right';
         }, this._duration);
       }
     }, this._delay + this._duration);
@@ -287,6 +290,24 @@ export class PfTooltip extends HTMLElement {
     this.tooltip.setAttribute('class', `tooltip ${this._placement} ${this._animation}`);
   }
 
+  /**
+   * update the placement of tooltip
+   */
+  _updatePlacement() {
+    switch (this._placement) {
+      case 'top':
+        return 'bottom';
+      case 'bottom':
+        return 'top';
+      case 'left':
+        return 'right';
+      case 'right':
+        return 'left';
+      default:
+        return this._placement;
+    }
+  }
+
   /**
    * Styles the tooltip based on placement attribute
    * @private
@@ -319,6 +340,18 @@ export class PfTooltip extends HTMLElement {
       this.tooltip.style.top = `${rect.top + scroll.y - tooltipDimensions.h / 2 + linkDimensions.h / 2}px`;
       this.tooltip.style.left = `${rect.left + scroll.x + linkDimensions.w}px`;
     }
+
+    this.tooltip.className.indexOf(this._placement) === -1 && (this.tooltip.className = this.tooltip.className.replace(/\b(top|bottom|left|right)+/, this._placement));
+  }
+
+  /**
+   * check the placement of tooltip
+   */
+  _checkPlacement() {
+    if (!pfUtil.isElementInViewport(this.tooltip)) {
+      this._placement = this._updatePlacement();
+      this._styleTooltip();
+    }
   }
 
   /**
