Move tooltips to a dedicated container element (#10731)

This should fix the z-index issues we've been seeing since the last reimplementation of the tooltips.

Author: Turbo87

app/components/dependency-list/row.module.css

@@ -37,15 +37,15 @@
         cursor: help;
     }
 
-    .tooltip {
-        word-break: break-all;
-    }
-
     @media only screen and (max-width: 550px) {
         display: block
     }
 }
 
+.tooltip {
+    word-break: break-all;
+}
+
 .range-lg, .range-sm {
     margin-right: var(--space-s);
     min-width: 100px;

app/components/tooltip.hbs

@@ -1,9 +1,13 @@
-<div ...attributes local-class="tooltip" {{attach-tooltip hide=this.hide show=this.show side=@side}}>
-  {{#unless this.hidden}}
-    {{#if (has-block)}}
-      {{yield}}
-    {{else}}
-      {{@text}}
-    {{/if}}
-  {{/unless}}
-</div>
+<span local-class="anchor" {{this.onInsertAnchor this}} />
+
+{{#if this.visible}}
+  {{#in-element this.containerElement}}
+    <div ...attributes local-class="tooltip" {{this.attachTooltip this side=@side}}>
+      {{#if (has-block)}}
+        {{yield}}
+      {{else}}
+        {{@text}}
+      {{/if}}
+    </div>
+  {{/in-element}}
+{{/if}}

app/components/tooltip.js

@@ -2,14 +2,65 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { modifier } from 'ember-modifier';
+
 export default class Tooltip extends Component {
-  @tracked hidden = true;
+  @tracked anchorElement = null;
+  @tracked visible = false;
 
-  @action hide() {
-    this.hidden = true;
+  get containerElement() {
+    return document.querySelector('#tooltip-container');
   }
 
   @action show() {
-    this.hidden = false;
+    this.visible = true;
+  }
+
+  @action hide() {
+    this.visible = false;
   }
+
+  onInsertAnchor = modifier((anchor, [component]) => {
+    component.anchorElement = anchor.parentElement;
+
+    let events = [
+      ['mouseenter', component.show],
+      ['mouseleave', component.hide],
+      ['focus', component.show],
+      ['blur', component.hide],
+    ];
+
+    for (let [event, listener] of events) {
+      component.anchorElement.addEventListener(event, listener);
+    }
+
+    return () => {
+      for (let [event, listener] of events) {
+        component.anchorElement?.removeEventListener(event, listener);
+      }
+    };
+  });
+
+  attachTooltip = modifier((floatingElement, [component], { side = 'top' } = {}) => {
+    let referenceElement = component.anchorElement;
+
+    async function update() {
+      let middleware = [offset(5), flip(), shift({ padding: 5 })];
+
+      let { x, y } = await computePosition(referenceElement, floatingElement, {
+        placement: side,
+        middleware,
+      });
+
+      Object.assign(floatingElement.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    }
+
+    let cleanup = autoUpdate(referenceElement, floatingElement, update);
+
+    return () => cleanup();
+  });
 }

app/components/tooltip.module.css

@@ -1,5 +1,4 @@
 .tooltip {
-    display: none;
     width: max-content;
     max-width: 300px;
     position: absolute;
@@ -20,3 +19,7 @@
         color: unset;
     }
 }
+
+.anchor {
+    display: none;
+}

app/components/version-list/row.hbs

@@ -18,7 +18,7 @@
         {{@version.releaseTrack}}
       {{/if}}
 
-      <Tooltip @side="right" local-class="tooltip" data-test-release-track-title>
+      <Tooltip @side="right" local-class="rt-tooltip" data-test-release-track-title>
         {{this.releaseTrackTitle}}
       </Tooltip>
     </div>

app/components/version-list/row.module.css

@@ -56,10 +56,6 @@
     grid-template-columns: auto auto;
     place-items: center;
 
-    .tooltip {
-        word-break: break-all;
-    }
-
     @media only screen and (max-width: 550px) {
         grid-template-columns: auto;
         margin: 0 var(--space-s);
@@ -109,6 +105,10 @@
     color: hsl(0, 87%, 58%);
 }
 
+.rt-tooltip {
+    word-break: break-all;
+}
+
 .num-link {
     max-width: 200px;
     text-overflow: ellipsis;
@@ -161,11 +161,6 @@
         margin-bottom: -.1em;
     }
 
-    .tooltip {
-        text-transform: none;
-        letter-spacing: normal;
-    }
-
     > * + * {
         margin-top: var(--space-2xs);
 
@@ -226,6 +221,13 @@
     padding: 0;
     margin: var(--space-2xs) var(--space-3xs);
     list-style: none;
+
+    svg {
+        height: 1em;
+        width: auto;
+        margin-right: var(--space-4xs);
+        margin-bottom: -.1em;
+    }
 }
 
 .yank-button {

app/modifiers/attach-tooltip.js

@@ -5,10 +5,6 @@
     strong {
         color: var(--main-color);
     }
-
-    :global(.tooltip) strong {
-        color: inherit;
-    }
 }
 
 .small a, a.small {

app/styles/shared/typography.module.css

@@ -5,6 +5,7 @@
 
 <ProgressBar/>
 <NotificationContainer @position="top-right"/>
+<div id="tooltip-container"></div>
 
 <Header @hero={{this.isIndex}} />