From 1a4a78e59f0ab26366a6989d40696db652ee964e Mon Sep 17 00:00:00 2001
From: Ovidio Henriquez <odejesush@chromium.org>
Date: Fri, 4 Jan 2019 10:32:40 -0800
Subject: [PATCH] Allow a manual target to be set

This change adds the ability to set a manual target that the tooltip
should be anchored to. A test is added to ensure that the target can be
set manually and that the tooltip is updated appropriately to be
anchored correctly.
---
 paper-tooltip.js | 16 ++++++++++--
 test/basic.html  | 65 +++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 78 insertions(+), 3 deletions(-)

diff --git a/paper-tooltip.js b/paper-tooltip.js
index 9476bc8..36f28be 100644
--- a/paper-tooltip.js
+++ b/paper-tooltip.js
@@ -314,12 +314,15 @@ Polymer({
 
   /**
    * Returns the target element that this tooltip is anchored to. It is
-   * either the element given by the `for` attribute, or the immediate parent
-   * of the tooltip.
+   * the element given by the `for` attribute, the element manually specified
+   * through the `target` attribute, or the immediate parent of the tooltip.
    *
    * @type {Node}
    */
   get target() {
+    if (this._manualTarget)
+      return this._manualTarget;
+
     var parentNode = dom(this).parentNode;
     // If the parentNode is a document fragment, then we need to use the host.
     var ownerRoot = dom(this).getOwnerRoot();
@@ -334,6 +337,15 @@ Polymer({
     return target;
   },
 
+  /**
+   * Sets the target element that this tooltip will be anchored to.
+   * @param {Node} target
+   */
+  set target(target) {
+    this._manualTarget = target;
+    this._findTarget();
+  },
+
   /**
    * @return {void}
    */
diff --git a/test/basic.html b/test/basic.html
index fe86f40..a284df1 100644
--- a/test/basic.html
+++ b/test/basic.html
@@ -22,11 +22,16 @@
     margin: 0;
     padding: 0;
   }
-  #target {
+  #target, #target1 {
     width: 100px;
     height: 20px;
     background-color: red;
   }
+  #target2 {
+    width: 120px;
+    height: 30px;
+    background-color: blue;
+  }
   paper-tooltip {
     width: 70px;
     height: 30px;
@@ -118,6 +123,18 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="manual-target">
+    <template>
+      <div>
+        <div id="target1">
+          <div id="target2">
+          </div>
+        </div>
+        <paper-tooltip>Text</paper-tooltip>
+      </div>
+    </template>
+  </test-fixture>
+
   <script type="module">
     import '@polymer/iron-test-helpers/mock-interactions.js';
     import '../paper-tooltip.js';
@@ -393,6 +410,52 @@
             expectToBasicallyEqual(contentRect.top, 20 + 14);
           });
 
+      test(
+          'tooltip is positioned correctly after the target is manually set',
+          function() {
+            var f = fixture('manual-target');
+            var target1 = f.querySelector('#target1');
+            var target2 = f.querySelector('#target2');
+            var tooltip = f.querySelector('paper-tooltip');
+
+            var actualTooltip = dom(tooltip.root).querySelector('#tooltip');
+            assert.isTrue(isHidden(actualTooltip));
+
+            // Skip animations in this test, which means we'll show and hide the
+            // the tooltip manually, instead of calling focus and blur.
+            tooltip.target = target1;
+
+            // The tooltip needs to hide before it gets repositioned.
+            tooltip.toggleClass('hidden', true, actualTooltip);
+            tooltip.updatePosition();
+            tooltip.toggleClass('hidden', false, actualTooltip);
+            assert.isFalse(isHidden(actualTooltip));
+
+            // The target1 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.
+            var contentRect = tooltip.getBoundingClientRect();
+            expectToBasicallyEqual(contentRect.left, (100 - 70) / 2);
+            expectToBasicallyEqual(contentRect.top, 20 + 14);
+
+            // Check that a target that is not a sibling can also be set
+            // manually.
+            tooltip.target = target2;
+
+            // The tooltip needs to hide before it gets repositioned.
+            tooltip.toggleClass('hidden', true, actualTooltip);
+            tooltip.updatePosition();
+            tooltip.toggleClass('hidden', false, actualTooltip);
+            assert.isFalse(isHidden(actualTooltip));
+
+            // The target2 div width is 120, and the tooltip width is 70, and
+            // it's centered. The height of the target div is 30, and the
+            // tooltip is 14px below.
+            contentRect = tooltip.getBoundingClientRect();
+            expectToBasicallyEqual(contentRect.left, (120 - 70) / 2);
+            expectToBasicallyEqual(contentRect.top, 30 + 14);
+          });
+
       test('tooltip is hidden after target is blurred', function() {
         var f = fixture('basic');
         var target = f.querySelector('#target');