diff --git a/app/components/dependency-list/row.module.css b/app/components/dependency-list/row.module.css
index 85a7235edb8..8701ccbce40 100644
--- a/app/components/dependency-list/row.module.css
+++ b/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;
diff --git a/app/components/tooltip.hbs b/app/components/tooltip.hbs
index 72f9945a30c..ff4632072f5 100644
--- a/app/components/tooltip.hbs
+++ b/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>
\ No newline at end of file
+<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}}
diff --git a/app/components/tooltip.js b/app/components/tooltip.js
index 796fcf123e0..b41a0af00c3 100644
--- a/app/components/tooltip.js
+++ b/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();
+  });
 }
diff --git a/app/components/tooltip.module.css b/app/components/tooltip.module.css
index eb7a8753c6e..44f9c930c4d 100644
--- a/app/components/tooltip.module.css
+++ b/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;
+}
diff --git a/app/components/version-list/row.hbs b/app/components/version-list/row.hbs
index 726193181db..d6391d23586 100644
--- a/app/components/version-list/row.hbs
+++ b/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>
diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
index 0af001cff18..bf81d4d2b8b 100644
--- a/app/components/version-list/row.module.css
+++ b/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 {
diff --git a/app/modifiers/attach-tooltip.js b/app/modifiers/attach-tooltip.js
deleted file mode 100644
index 6d45aec8a55..00000000000
--- a/app/modifiers/attach-tooltip.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
-import { modifier } from 'ember-modifier';
-
-export default modifier((floatingElement, positional, { hide, show, side = 'top' } = {}) => {
-  let referenceElement = floatingElement.parentElement;
-
-  let cleanup;
-
-  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`,
-    });
-  }
-
-  function showTooltip() {
-    show();
-    floatingElement.style.display = 'block';
-    cleanup = autoUpdate(referenceElement, floatingElement, update);
-  }
-
-  function hideTooltip() {
-    hide();
-    floatingElement.style.display = '';
-    cleanup?.();
-  }
-
-  [
-    ['mouseenter', showTooltip],
-    ['mouseleave', hideTooltip],
-    ['focus', showTooltip],
-    ['blur', hideTooltip],
-  ].forEach(([event, listener]) => {
-    referenceElement.addEventListener(event, listener);
-  });
-
-  return () => cleanup?.();
-});
diff --git a/app/styles/shared/typography.module.css b/app/styles/shared/typography.module.css
index dee269ce126..60abd926a84 100644
--- a/app/styles/shared/typography.module.css
+++ b/app/styles/shared/typography.module.css
@@ -5,10 +5,6 @@
     strong {
         color: var(--main-color);
     }
-
-    :global(.tooltip) strong {
-        color: inherit;
-    }
 }
 
 .small a, a.small {
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 0e8649c8cd9..7d30c6a6ad2 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -5,6 +5,7 @@
 
 <ProgressBar/>
 <NotificationContainer @position="top-right"/>
+<div id="tooltip-container"></div>
 
 <Header @hero={{this.isIndex}} />