Fix paper tooltip fit to visible bounds.

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';

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() {