Fix paper tooltip fit to visible bounds.

There are 3 cases that can happen with fit to visible bounds (Using left/right for simplicity here) 1) Off the right of the screen 2) Off the left of the screen 3) In the middle of the screen (no adjustment required) Paper tooltip failed to handle case (3). Fix that.
PolymerElements · Jul 8, 2021 · 3a49368 · 3a49368
1 parent 67a2272
commit 3a49368
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 2 deletions.
diff --git a/paper-tooltip.js b/paper-tooltip.js
@@ -473,17 +473,21 @@ Polymer({
       if (parentRect.left + tooltipLeft + thisRect.width > window.innerWidth) {
         this.style.right = '0px';
         this.style.left = 'auto';
-      } else {
+      } else if (parentRect.left + tooltipLeft < 0) {
         this.style.left = Math.max(0, tooltipLeft) + 'px';
         this.style.right = 'auto';
+      } else {
+        this.style.left = tooltipLeft + 'px';
       }
       // Clip the top/bottom side.
       if (parentRect.top + tooltipTop + thisRect.height > window.innerHeight) {
         this.style.bottom = (parentRect.height - targetTop + offset) + 'px';
         this.style.top = 'auto';
-      } else {
+      } else if (parentRect.top + tooltipTop < 0) {
         this.style.top = Math.max(-parentRect.top, tooltipTop) + 'px';
         this.style.bottom = 'auto';
+      } else {
+        this.style.top = tooltipTop + 'px';
       }
     } else {
       this.style.left = tooltipLeft + 'px';

diff --git a/test/basic.html b/test/basic.html
@@ -61,6 +61,16 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="basic-fitted">
+    <template>
+      <div>
+        <div id="target"></div>
+        <paper-tooltip for="target" animation-delay="0" fit-to-visible-bounds>Tooltip text</paper-tooltip>
+      </div>
+    </template>
+  </test-fixture>
+
+
   <test-fixture id="fitted">
     <template>
       <div>
@@ -353,6 +363,44 @@
         expectToBasicallyEqual(contentRect.top, divRect.height + tooltip.offset);
       });
 
+      test('tooltip is fitted correctly if in bounds', function() {
+        var f = fixture('basic-fitted');
+        var target = f.querySelector('#target');
+        var tooltip = f.querySelector('paper-tooltip');
+
+        var actualTooltip = dom(tooltip.root).querySelector('#tooltip');
+        assert.isTrue(isHidden(actualTooltip));
+
+        MockInteractions.focus(target);
+        assert.isFalse(isHidden(actualTooltip));
+
+        console.log('divrect')
+        var divRect = target.getBoundingClientRect();
+        expectToBasicallyEqual(divRect.width, 100);
+        expectToBasicallyEqual(divRect.height, 20);
+
+        console.log('contentrect')
+        var divRect = target.getBoundingClientRect();
+        var contentRect = tooltip.getBoundingClientRect();
+        expectToBasicallyEqual(contentRect.width, 70);
+        expectToBasicallyEqual(contentRect.height, 30);
+
+        console.log('positioning')
+        console.log('content left' + contentRect.left)
+        console.log('content top' + contentRect.top)
+        // The target div width is 100, and the tooltip width is 70, and
+        // it's centered. The height of the target div is 20, and the
+        // tooltip is 14px below.
+        expectToBasicallyEqual(contentRect.left, (100 - 70) / 2);
+        expectToBasicallyEqual(contentRect.top, 20 + 14);
+
+        console.log('positioning2')
+        // Also check the math, just in case.
+        expectToBasicallyEqual(
+            contentRect.left, (divRect.width - contentRect.width) / 2);
+        expectToBasicallyEqual(contentRect.top, divRect.height + tooltip.offset);
+      });
+
       test(
           'tooltip is positioned correctly after being dynamically set',
           function() {