From 3a49368a8db04f76a1bb9dcad8858cb36e7005a2 Mon Sep 17 00:00:00 2001
From: John Palmer <jopalmer@google.com>
Date: Thu, 8 Jul 2021 10:45:39 +1000
Subject: [PATCH] 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.
---
 paper-tooltip.js |  8 ++++++--
 test/basic.html  | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/paper-tooltip.js b/paper-tooltip.js
index 220ae34..7951ac4 100644
--- 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
index fe86f40..d64867c 100644
--- 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() {