From db5ec9a934a67af259ce67bd7bd8704b0ee50332 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 20 Oct 2021 21:03:20 +1100
Subject: [PATCH] smoother tooltips, delay arg

---
 api/components/_.mjs       |  4 +++-
 api/components/tooltip.css |  1 +
 api/components/tooltip.mjs | 30 +++++++++++++++++++++++-------
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/api/components/_.mjs b/api/components/_.mjs
index dcc4a9e..2119cd9 100644
--- a/api/components/_.mjs
+++ b/api/components/_.mjs
@@ -14,7 +14,9 @@
 /**
  * add a tooltip to show extra information on hover
  * @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered
- * @param {string} text - the markdown content of the tooltip
+ * @param {string|HTMLElement} $text - the markdown content of the tooltip
+ * @param {number} [delay] - the amount of time the element needs to be hovered over
+ * for the tooltip to be shown
  */
 export { setTooltip } from './tooltip.mjs';
 
diff --git a/api/components/tooltip.css b/api/components/tooltip.css
index b807357..9f2bbcf 100644
--- a/api/components/tooltip.css
+++ b/api/components/tooltip.css
@@ -19,6 +19,7 @@
   padding: 2px 8px 4px 8px;
   position: absolute;
   z-index: 999999999999999999;
+  pointer-events: none;
 }
 #enhancer--tooltip p {
   margin: 0.25rem 0;
diff --git a/api/components/tooltip.mjs b/api/components/tooltip.mjs
index e1eb8ec..83cfd0d 100644
--- a/api/components/tooltip.mjs
+++ b/api/components/tooltip.mjs
@@ -19,20 +19,36 @@ web.loadStylesheet('api/components/tooltip.css');
 /**
  * add a tooltip to show extra information on hover
  * @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered
- * @param {string} text - the markdown content of the tooltip
+ * @param {string|HTMLElement} $text - the markdown content of the tooltip
+ * @param {number} [delay] - the amount of time the element needs to be hovered over
+ * for the tooltip to be shown
  */
-export const setTooltip = ($ref, text) => {
+export const setTooltip = ($ref, $text, delay = 100) => {
   web.render(document.body, _$tooltip);
-  text = web.html`${fmt.md.render(text)}`;
+  if (!($text instanceof Element)) $text = web.html`${fmt.md.render($text)}`;
+  let displayDelay;
   $ref.addEventListener('mouseover', (event) => {
-    web.render(web.empty(_$tooltip), text);
-    _$tooltip.style.display = 'block';
+    web.render(web.empty(_$tooltip), $text);
+    if (!displayDelay) {
+      displayDelay = setTimeout(async () => {
+        if ($ref.matches(':hover')) {
+          _$tooltip.style.display = 'block';
+          _$tooltip.style.top = event.clientY - _$tooltip.clientHeight + 'px';
+          _$tooltip.style.left = event.clientX - _$tooltip.clientWidth + 'px';
+          await _$tooltip.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 65 }).finished;
+        }
+        displayDelay = undefined;
+      }, delay);
+    }
   });
   $ref.addEventListener('mousemove', (event) => {
     _$tooltip.style.top = event.clientY - _$tooltip.clientHeight + 'px';
     _$tooltip.style.left = event.clientX - _$tooltip.clientWidth + 'px';
   });
-  $ref.addEventListener('mouseout', (event) => {
-    _$tooltip.style.display = '';
+  $ref.addEventListener('mouseout', async (event) => {
+    if (!$ref.matches(':hover')) {
+      await _$tooltip.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 65 }).finished;
+      _$tooltip.style.display = '';
+    }
   });
 };