From 4bd4e4ed1bd1661e3e65ce092c6a7556e620b91b Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 6 Aug 2020 15:40:34 -0400
Subject: [PATCH] Unbind tooltip on change to falsey value

---
 app/src/directives/tooltip/tooltip.ts | 37 +++++++++++++++++----------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/src/directives/tooltip/tooltip.ts b/app/src/directives/tooltip/tooltip.ts
index ffeab207de..9a4265b13d 100644
--- a/app/src/directives/tooltip/tooltip.ts
+++ b/app/src/directives/tooltip/tooltip.ts
@@ -4,20 +4,31 @@ import { nanoid } from 'nanoid';
 
 const handlers: Record<string, () => void> = {};
 
+
+function bind(element: HTMLElement, binding: DirectiveBinding) {
+	element.dataset.tooltip = nanoid();
+	handlers[element.dataset.tooltip] = createEnterHandler(element, binding);
+	element.addEventListener('mouseenter', handlers[element.dataset.tooltip]);
+	element.addEventListener('mouseleave', onLeaveTooltip);
+}
+
+function unbind(element: HTMLElement) {
+	element.removeEventListener('mouseenter', handlers[element.dataset.tooltip as string]);
+	element.removeEventListener('mouseleave', onLeaveTooltip);
+	clearTimeout(tooltipTimer);
+	const tooltip = getTooltip();
+	tooltip.classList.remove('visible');
+	delete handlers[element.dataset.tooltip as string];
+}
+
 const Tooltip: DirectiveOptions = {
-	bind(element, binding) {
-		element.dataset.tooltip = nanoid();
-		handlers[element.dataset.tooltip] = createEnterHandler(element, binding);
-		element.addEventListener('mouseenter', handlers[element.dataset.tooltip]);
-		element.addEventListener('mouseleave', onLeaveTooltip);
-	},
-	unbind(element) {
-		element.removeEventListener('mouseenter', handlers[element.dataset.tooltip as string]);
-		element.removeEventListener('mouseleave', onLeaveTooltip);
-		clearTimeout(tooltipTimer);
-		const tooltip = getTooltip();
-		tooltip.classList.remove('visible');
-		delete handlers[element.dataset.tooltip as string];
+	bind, unbind,
+	update(element, binding) {
+		if (binding.value && !binding.oldValue) {
+			bind(element, binding);
+		} else if (!binding.value && binding.oldValue) {
+			unbind(element);
+		}
 	}
 };