UX: add hover delay to reduce annoyance (#2)

Author: awesomerobot

javascripts/discourse/components/topic-list-tooltip.gjs

@@ -1,14 +1,18 @@
 import Component from "@glimmer/component";
 import { getOwner } from "@ember/owner";
+import { cancel } from "@ember/runloop";
 import { htmlSafe } from "@ember/template";
 import replaceEmoji from "discourse/helpers/replace-emoji";
+import discourseLater from "discourse/lib/later";
 import DTooltip from "float-kit/components/d-tooltip";
 
 const triggers = {
   mobile: ["hover"],
   desktop: ["hover"],
 };
 
+const MILLISECONDS_PER_SECOND = 1000;
+
 let TABLE_AI_LAYOUT = "table-ai";
 import("discourse/plugins/discourse-ai/discourse/services/gists")
   .then((module) => {
@@ -19,6 +23,23 @@ import("discourse/plugins/discourse-ai/discourse/services/gists")
   });
 
 export default class TopicListTooltip extends Component {
+  hoverTimeout = null;
+
+  beforeTrigger = async () => {
+    this.cancelPending();
+
+    return new Promise((resolve) => {
+      this.hoverTimeout = discourseLater(() => {
+        this.hoverTimeout = null;
+        resolve();
+      }, settings.hover_delay_seconds * MILLISECONDS_PER_SECOND);
+    });
+  };
+
+  onClose = () => {
+    this.cancelPending();
+  };
+
   get gistsService() {
     try {
       return getOwner(this).lookup("service:gists");
@@ -65,12 +86,21 @@ export default class TopicListTooltip extends Component {
     return null;
   }
 
+  cancelPending() {
+    if (this.hoverTimeout) {
+      cancel(this.hoverTimeout);
+      this.hoverTimeout = null;
+    }
+  }
+
   <template>
     {{#if this.shouldShowTooltip}}
       <DTooltip
         @triggers={{triggers}}
         @untriggers={{triggers}}
         @placement="bottom-start"
+        @beforeTrigger={{this.beforeTrigger}}
+        @onClose={{this.onClose}}
       >
         <:trigger>
           {{yield}}

settings.yml

@@ -4,3 +4,10 @@ tooltip_content:
   choices:
     - first_post_excerpt
     - ai_topic_gist
+
+hover_delay_seconds:
+  type: float
+  default: 0.25
+  min: 0
+  max: 2.0
+  description: "Delay in seconds before showing the tooltip on hover (helps prevent tooltips from appearing during scrolling)"