components/tooltip: Allow hovering over tooltip to interact with links (#12218)

Use `ember-concurrency` `restartableTask` with 100ms delay to allow users
to move their mouse from the anchor element into the tooltip without it
disappearing. Add `mouseenter` and `mouseleave` handlers to the tooltip
element itself to keep it visible while hovering.

Author: Turbo87

app/components/tooltip.gjs

@@ -3,6 +3,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
 import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { restartableTask, timeout } from 'ember-concurrency';
 import { modifier } from 'ember-modifier';
 
 export default class Tooltip extends Component {
@@ -14,13 +15,21 @@ export default class Tooltip extends Component {
   }
 
   @action show() {
+    this.hideTask.cancelAll();
     this.visible = true;
   }
 
   @action hide() {
-    this.visible = false;
+    this.hideTask.perform().catch(() => {
+      // ignore cancelation errors
+    });
   }
 
+  hideTask = restartableTask(async () => {
+    await timeout(100);
+    this.visible = false;
+  });
+
   onInsertAnchor = modifier((anchor, [component]) => {
     component.anchorElement = anchor.parentElement;
 
@@ -61,7 +70,14 @@ export default class Tooltip extends Component {
 
     let cleanup = autoUpdate(referenceElement, floatingElement, update);
 
-    return () => cleanup();
+    floatingElement.addEventListener('mouseenter', component.show);
+    floatingElement.addEventListener('mouseleave', component.hide);
+
+    return () => {
+      cleanup();
+      floatingElement.removeEventListener('mouseenter', component.show);
+      floatingElement.removeEventListener('mouseleave', component.hide);
+    };
   });
 
   // The `{{~@x~}}` is used for whitespace control to ensure we don't insert a leading whitespace element