fix(tooltip): Hide link tooltip if that link is toggled off (#568)

bustle · Aug 10, 2017 · 29dfca5 · 29dfca5
1 parent ecf5912
commit 29dfca5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/js/utils/element-utils.js b/src/js/utils/element-utils.js
@@ -66,12 +66,27 @@ function setData(element, name, value) {
   }
 }
 
+function whenElementIsNotInDOM(element, callback) {
+  let isCanceled = false;
+  const observerFn = () => {
+    if (isCanceled) { return; }
+    if (!element.parentNode) {
+      callback();
+    } else {
+      window.requestAnimationFrame(observerFn);
+    }
+  };
+  observerFn();
+  return { cancel: () => isCanceled = true };
+}
+
 export {
   setData,
   getEventTargetMatchingTag,
   getElementRelativeOffset,
   getElementComputedStyleNumericProp,
   positionElementToRect,
   positionElementHorizontallyCenteredToRect,
-  positionElementCenteredBelow
+  positionElementCenteredBelow,
+  whenElementIsNotInDOM
 };
diff --git a/src/js/views/tooltip.js b/src/js/views/tooltip.js
@@ -1,5 +1,9 @@
 import View from './view';
-import { positionElementCenteredBelow, getEventTargetMatchingTag } from '../utils/element-utils';
+import {
+  positionElementCenteredBelow,
+  getEventTargetMatchingTag,
+  whenElementIsNotInDOM
+} from '../utils/element-utils';
 
 const DELAY = 200;
 
@@ -21,6 +25,7 @@ export default class Tooltip extends View {
 
     this.addEventListener(rootElement, 'mouseout', (e) => {
       clearTimeout(timeout);
+      if (this.elementObserver) { this.elementObserver.cancel(); }
       let toElement = e.toElement || e.relatedTarget;
       if (toElement && toElement.className !== this.element.className) {
         this.hide();
@@ -38,5 +43,6 @@ export default class Tooltip extends View {
   showLink(link, element) {
     let message = `<a href="${link}" target="_blank">${link}</a>`;
     this.showMessage(message, element);
+    this.elementObserver = whenElementIsNotInDOM(element, () => this.hide());
   }
 }