Replace ember-tooltips with floating-ui

app/components/crate-header.hbs

@@ -9,10 +9,10 @@
           {{svg-jar "trash"}}
           Yanked
 
-          <EmberTooltip>
+          <Tooltip>
             This crate has been yanked, but it is still available for download for other crates that
             may be depending on it.
-          </EmberTooltip>
+          </Tooltip>
         </span>
       {{/if}}
     {{/if}}

app/components/crate-row.hbs

@@ -28,7 +28,7 @@
       <span>
         <span>
           All-Time:
-          <EmberTooltip @text="Total number of downloads"/>
+          <Tooltip @text="Total number of downloads"/>
         </span>
         {{ format-num @crate.downloads }}
       </span>
@@ -38,7 +38,7 @@
       <span>
         <span>
           Recent:
-          <EmberTooltip @text="Downloads in the last 90 days"/>
+          <Tooltip @text="Downloads in the last 90 days"/>
         </span>
         {{ format-num @crate.recent_downloads }}
       </span>
@@ -48,11 +48,11 @@
       <span>
         <span>
           Updated:
-          <EmberTooltip @text="The last time the crate was updated" />
+          <Tooltip @text="The last time the crate was updated" />
         </span>
         <time datetime="{{date-format-iso @crate.updated_at}}" data-test-updated-at>
           {{date-format-distance-to-now @crate.updated_at addSuffix=true}}
-          <EmberTooltip @text={{ @crate.updated_at }}/>
+          <Tooltip @text={{ @crate.updated_at }}/>
         </time>
       </span>
     </div>

app/components/crate-sidebar.hbs

@@ -13,7 +13,7 @@
       {{svg-jar "calendar"}}
       <span>
         {{date-format-distance-to-now @version.created_at addSuffix=true}}
-        <EmberTooltip @text={{date-format @version.created_at 'PPP'}} />
+        <Tooltip @text={{date-format @version.created_at 'PPP'}} />
       </span>
     </time>
 
@@ -120,7 +120,7 @@
         Try on Rust Playground
 
         {{#if this.canHover}}
-          <EmberTooltip
+          <Tooltip
             @text="The top 100 crates are available on the Rust Playground for you to try out directly in your browser." />
         {{/if}}
       </a>

app/components/crate-sidebar.module.css

@@ -37,7 +37,7 @@
 .date,
 .msrv,
 .edition {
-    [title], :global(.ember-tooltip-target) {
+    > span {
         cursor: help;
     }
 }

app/components/dependency-list/row.hbs

@@ -36,23 +36,20 @@
 
       {{#if this.featuresDescription}}
         <span local-class="features-label" data-test-features>
-          {{! extra <span> for better tooltip alignment }}
-          <span>
-            {{this.featuresDescription}}
+          {{this.featuresDescription}}
 
-            <EmberTooltip>
-              <ul local-class="feature-list">
+          <Tooltip local-class="tooltip">
+            <ul local-class="feature-list">
+              <li>
+                {{svg-jar (if @dependency.default_features "checkbox" "checkbox-empty")}} default features
+              </li>
+              {{#each @dependency.features as |feature|}}
                 <li>
-                  {{svg-jar (if @dependency.default_features "checkbox" "checkbox-empty")}} default features
+                  {{svg-jar "checkbox"}} {{feature}}
                 </li>
-                {{#each @dependency.features as |feature|}}
-                  <li>
-                    {{svg-jar "checkbox"}} {{feature}}
-                  </li>
-                {{/each}}
-              </ul>
-            </EmberTooltip>
-          </span>
+              {{/each}}
+            </ul>
+          </Tooltip>
         </span>
       {{/if}}
     </div>

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

@@ -31,13 +31,13 @@
         --placeholder-opacity: 0.15;
     }
 
-    [title], :global(.ember-tooltip-target) {
+    [title], .features-label {
         position: relative;
         z-index: 1;
         cursor: help;
     }
 
-    :global(.ember-tooltip) {
+    .tooltip {
         word-break: break-all;
     }
 
@@ -112,7 +112,7 @@
         margin-bottom: -.1em;
     }
 
-    :global(.ember-tooltip) {
+    .tooltip {
         text-transform: none;
         letter-spacing: normal;
     }
@@ -133,7 +133,7 @@
 
 .feature-list {
     padding: 0;
-    margin: 10px 5px;
+    margin: var(--space-2xs) var(--space-3xs);
     list-style: none;
 
     svg {

app/components/edition.hbs

@@ -1,7 +1,7 @@
 <span>
   {{@version.edition}} edition
 
-  <EmberTooltip>
+  <Tooltip>
     This crate version does not declare a Minimum Supported Rust Version, but
     does require the {{@version.edition}} Rust Edition.
 
@@ -10,5 +10,5 @@
       but this crate may require features that were added in later versions of
       Rust.
     </div>
-  </EmberTooltip>
+  </Tooltip>
 </span>

app/components/msrv.hbs

@@ -1,10 +1,10 @@
 <span>
   v{{@version.msrv}}
 
-  <EmberTooltip>
+  <Tooltip>
     &quot;Minimum Supported Rust Version&quot;
     {{#if @version.edition}}
       <div local-class="edition">requires Rust Edition {{@version.edition}}</div>
     {{/if}}
-  </EmberTooltip>
+  </Tooltip>
 </span>

app/components/privileged-action.hbs

@@ -12,9 +12,9 @@
       <fieldset data-test-placeholder-fieldset disabled="disabled">
         {{yield}}
       </fieldset>
-      <EmberTooltip>
+      <Tooltip>
         You must enable admin actions before you can perform this operation.
-      </EmberTooltip>
+      </Tooltip>
     </div>
   {{/if}}
 {{else}}

app/components/settings/api-tokens.hbs

@@ -48,7 +48,7 @@
 
                 {{#each (this.listToParts token.endpoint_scopes) as |part|~}}
                   {{#if (eq part.type "element")}}
-                    <strong>{{part.value}}<EmberTooltip @text={{this.scopeDescription part.value}} /></strong>
+                    <strong>{{part.value}}<Tooltip @text={{this.scopeDescription part.value}} /></strong>
                     {{~else~}}
                     {{part.value}}
                   {{/if}}
@@ -62,7 +62,7 @@
 
                 {{#each (this.listToParts token.crate_scopes) as |part|~}}
                   {{#if (eq part.type "element")}}
-                    <strong>{{part.value}}<EmberTooltip @text={{this.patternDescription part.value}} /></strong>
+                    <strong>{{part.value}}<Tooltip @text={{this.patternDescription part.value}} /></strong>
                     {{~else~}}
                     {{part.value}}
                   {{/if}}

app/components/tooltip.hbs

@@ -0,0 +1,9 @@
+<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>

app/components/tooltip.js

@@ -0,0 +1,15 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class Tooltip extends Component {
+  @tracked hidden = true;
+
+  @action hide() {
+    this.hidden = true;
+  }
+
+  @action show() {
+    this.hidden = false;
+  }
+}

app/components/tooltip.module.css

@@ -0,0 +1,22 @@
+.tooltip {
+    display: none;
+    width: max-content;
+    max-width: 300px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #3a3c47;
+    color: white;
+    font-family: var(--font-body);
+    font-size: 14px;
+    font-weight: normal;
+    overflow: hidden;
+    text-wrap: auto;
+    padding: var(--space-2xs) var(--space-xs);
+    border-radius: var(--space-3xs);
+    z-index: 2;
+
+    strong {
+        color: unset;
+    }
+}

app/components/version-list/row.hbs

@@ -20,9 +20,9 @@
         {{@version.releaseTrack}}
       {{/if}}
 
-      <EmberTooltip @side="right" data-test-release-track-title>
+      <Tooltip @side="right" local-class="tooltip" data-test-release-track-title>
         {{this.releaseTrackTitle}}
-      </EmberTooltip>
+      </Tooltip>
     </div>
 
     <LinkTo
@@ -56,12 +56,12 @@
         {{svg-jar "calendar"}}
         {{date-format-distance-to-now @version.created_at addSuffix=true}}
 
-        <EmberTooltip>
+        <Tooltip local-class="tooltip">
           {{date-format @version.created_at 'PPP'}}
           {{#if @version.isNew}}
             (<span local-class="new">new</span>)
           {{/if}}
-        </EmberTooltip>
+        </Tooltip>
       </time>
     </div>
 
@@ -98,7 +98,7 @@
             {{svg-jar "checkbox"}}
             {{@version.featureList.length}} {{if (eq @version.featureList.length 1) "Feature" "Features"}}
 
-            <EmberTooltip>
+            <Tooltip local-class="tooltip">
               <ul local-class="feature-list">
                 {{#each @version.featureList as |feature|}}
                   <li>
@@ -107,7 +107,7 @@
                   </li>
                 {{/each}}
               </ul>
-            </EmberTooltip>
+            </Tooltip>
           </span>
         {{/if}}
       </div>

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

@@ -40,20 +40,23 @@
         --hover-bg-color: light-dark(hsl(0, 92%, 98%), hsl(0, 10%, 11%));
         --fg-color: light-dark(hsl(0, 84%, 32%), hsl(0, 92%, 90%));
     }
+}
 
-    [title], :global(.ember-tooltip-target) {
-        position: relative;
-        z-index: 1;
-        cursor: help;
-    }
+.release-track, .date, .num-features {
+    z-index: 1;
+    cursor: help;
+}
+
+.date, .num-features {
+    position: relative;
 }
 
 .version {
     display: grid;
     grid-template-columns: auto auto;
     place-items: center;
 
-    :global(.ember-tooltip) {
+    .tooltip {
         word-break: break-all;
     }
 
@@ -158,7 +161,7 @@
         margin-bottom: -.1em;
     }
 
-    :global(.ember-tooltip) {
+    .tooltip {
         text-transform: none;
         letter-spacing: normal;
     }
@@ -199,7 +202,7 @@
     }
 }
 
-.date.new, :global(.tooltip) .new {
+.date.new, .tooltip .new {
     color: hsl(39, 98%, 47%);
 }
 
@@ -221,7 +224,7 @@
 
 .feature-list {
     padding: 0;
-    margin: var(--space-xs) var(--space-2xs);
+    margin: var(--space-2xs) var(--space-3xs);
     list-style: none;
 }