Add info on inwards-drifting bikes

index.css

@@ -27,10 +27,6 @@ menu {
   }
 }
 
-.info {
-  text-decoration: dotted underline;
-}
-
 :root {
   --meter-length: 0;
 }
@@ -82,6 +78,11 @@ menu:empty {
   margin: 0.25em 0;
 }
 
+.info::before {
+  content: "\00fe0e\002139";
+  text-decoration: dotted underline;
+}
+
 #rivals {
   margin-top: 0.5em;
   min-height: 2.5em;

index.html

@@ -237,6 +237,9 @@
         <option value="yes">Only</option>
         <option value="no">Ignored</option>
       </select>
+      <span class="info"
+        title="Some bikes shift their center of gravity inwards while drifting, making them handle very differently. Select &quot;Only&quot; to only see these bikes, or &quot;Ignored&quot; to omit these bikes."
+      ></span>
       <br />
       <button type="button" id="limit-characters">Limit characters</button>
       <button type="button" id="limit-karts">Limit karts</button>

src/index.civet

@@ -177,13 +177,8 @@ rivalsDiv := document.createElement 'div'
 rivalInfoString := 'When playing as P1 in a Grand Prix, these characters are guaranteed to be COM characters and should be better than other COMs, unless they are chosen by other players. Not all characters have rivals.'
 
 document.createElement 'sup'
-    ||> .textContent = '\ufe0e\u2139'
     ||> .className = 'info'
     ||> .title = rivalInfoString
-    ||> .addEventListener
-        'click'
-        -> alert rivalInfoString
-        { +passive }
     ||> rivalsDiv.appendChild
 rivalsDiv.append ': '
 
@@ -327,3 +322,9 @@ document.querySelector 'button[type="reset"]'
         limitedData = structuredClone data
         menu.innerHTML = ''
         currMenu = undefined
+
+document.querySelectorAll '.info'
+    .forEach .addEventListener
+        'click'
+        -> alert @title
+        { +passive }