1 files changed, 38 insertions, 28 deletions

diff --git a/polygerrit-ui/app/behaviors/gr-tooltip-behavior/gr-tooltip-behavior.js b/polygerrit-ui/app/behaviors/gr-tooltip-behavior/gr-tooltip-behavior.js
index e4c4d11532..7da82b7431 100644
--- a/polygerrit-ui/app/behaviors/gr-tooltip-behavior/gr-tooltip-behavior.js
+++ b/polygerrit-ui/app/behaviors/gr-tooltip-behavior/gr-tooltip-behavior.js
@@ -14,40 +14,49 @@
 (function(window) {
   'use strict';
 
-  var BOTTOM_OFFSET = 7.2; // Height of the arrow in tooltip.
+  const BOTTOM_OFFSET = 7.2; // Height of the arrow in tooltip.
+
+  window.Gerrit = window.Gerrit || {};
 
   /** @polymerBehavior Gerrit.TooltipBehavior */
-  var TooltipBehavior = {
+  Gerrit.TooltipBehavior = {
 
     properties: {
-      hasTooltip: Boolean,
+      hasTooltip: {
+        type: Boolean,
+        observer: '_setupTooltipListeners',
+      },
 
       _isTouchDevice: {
         type: Boolean,
-        value: function() {
+        value() {
           return 'ontouchstart' in document.documentElement;
         },
       },
-      _tooltip: Element,
+      _tooltip: Object,
       _titleText: String,
+      _hasSetupTooltipListeners: {
+        type: Boolean,
+        value: false,
+      },
     },
 
-    attached: function() {
-      if (!this.hasTooltip) { return; }
+    detached() {
+      this._handleHideTooltip();
+      this.unlisten(window, 'scroll', '_handleWindowScroll');
+    },
+
+    _setupTooltipListeners() {
+      if (this._hasSetupTooltipListeners || !this.hasTooltip) { return; }
+      this._hasSetupTooltipListeners = true;
 
       this.addEventListener('mouseenter', this._handleShowTooltip.bind(this));
       this.addEventListener('mouseleave', this._handleHideTooltip.bind(this));
       this.addEventListener('tap', this._handleHideTooltip.bind(this));
-
       this.listen(window, 'scroll', '_handleWindowScroll');
     },
 
-    detached: function() {
-      this._handleHideTooltip();
-      this.unlisten(window, 'scroll', '_handleWindowScroll');
-    },
-
-    _handleShowTooltip: function(e) {
+    _handleShowTooltip(e) {
       if (this._isTouchDevice) { return; }
 
       if (!this.hasAttribute('title') ||
@@ -61,21 +70,21 @@
       this._titleText = this.getAttribute('title');
       this.setAttribute('title', '');
 
-      var tooltip = document.createElement('gr-tooltip');
+      const tooltip = document.createElement('gr-tooltip');
       tooltip.text = this._titleText;
       tooltip.maxWidth = this.getAttribute('max-width');
 
       // Set visibility to hidden before appending to the DOM so that
       // calculations can be made based on the element’s size.
       tooltip.style.visibility = 'hidden';
-      Polymer.dom(document.body).appendChild(tooltip);
+      Gerrit.getRootElement().appendChild(tooltip);
       this._positionTooltip(tooltip);
       tooltip.style.visibility = null;
 
       this._tooltip = tooltip;
     },
 
-    _handleHideTooltip: function(e) {
+    _handleHideTooltip(e) {
       if (this._isTouchDevice) { return; }
       if (!this.hasAttribute('title') ||
           this._titleText == null) {
@@ -89,19 +98,23 @@
       this._tooltip = null;
     },
 
-    _handleWindowScroll: function(e) {
+    _handleWindowScroll(e) {
       if (!this._tooltip) { return; }
 
       this._positionTooltip(this._tooltip);
     },
 
-    _positionTooltip: function(tooltip) {
-      var rect = this.getBoundingClientRect();
-      var boxRect = tooltip.getBoundingClientRect();
-      var parentRect = tooltip.parentElement.getBoundingClientRect();
-      var top = rect.top - parentRect.top;
-      var left = rect.left - parentRect.left + (rect.width - boxRect.width) / 2;
-      var right = parentRect.width - left - boxRect.width;
+    _positionTooltip(tooltip) {
+      // This flush is needed for tooltips to be positioned correctly in Firefox
+      // and Safari.
+      Polymer.dom.flush();
+      const rect = this.getBoundingClientRect();
+      const boxRect = tooltip.getBoundingClientRect();
+      const parentRect = tooltip.parentElement.getBoundingClientRect();
+      const top = rect.top - parentRect.top;
+      const left =
+          rect.left - parentRect.left + (rect.width - boxRect.width) / 2;
+      const right = parentRect.width - left - boxRect.width;
       if (left < 0) {
         tooltip.updateStyles({
           '--gr-tooltip-arrow-center-offset': left + 'px',
@@ -117,7 +130,4 @@
           'px))';
     },
   };
-
-  window.Gerrit = window.Gerrit || {};
-  window.Gerrit.TooltipBehavior = TooltipBehavior;
 })(window);