Add tooltip for component tag on docs.rs

docs-rs/trait-tags.html

@@ -39,13 +39,13 @@
         const isImmutable = [...associatedTypeHeader].some(el => el.innerText.includes('type Mutability = Immutable'));
 
         // Create a tag for each implemented trait.
-        for (let [tagName, href] of implementedBevyTraits) {
+        for (let [tagName, [href, requiredComponents]] of implementedBevyTraits) {
             if (tagName == 'Component' & isImmutable) {
                 tagName = 'Immutable Component';
             }
 
             // Create the tag and append it to the container.
-            tagContainer.appendChild(createBevyTag(tagName, href));
+            tagContainer.appendChild(createBevyTag(tagName, href, requiredComponents));
         }
     }
 
@@ -64,12 +64,31 @@
             // This results in ['impl', 'TraitName', 'for', 'TypeName'].
             const traitName = removeGenerics(header.innerText).split(' ')[1].trim();
 
+            let requiredComponents = [];
+            if (traitName === `Component`) {
+                const docblock = Array.from(header.parentNode.children)
+                    .find(child => child.classList.contains('docblock'));
+                if (docblock) {
+                    for (const el of docblock.children[0].children) {
+                        let code;
+                        if (el.nodeName === `A`) {
+                            code = el.children[0];
+                        } else if (el.nodeName === `CODE`) {
+                            code = el;
+                        } else {
+                            continue;
+                        }
+                        requiredComponents.push(code.innerText);
+                    }
+                }
+            }
+
             // Find the link to the trait if the anchor element exists.
             // Otherwise, the trait is just in plain text.
             const traitLinkEl = [...header.children].find(el => el.getAttribute('href')?.includes(`trait.${traitName}.html`));
             const href = traitLinkEl?.getAttribute('href');
 
-            implementedTraits.set(traitName, href);
+            implementedTraits.set(traitName, [href, requiredComponents]);
         }
 
         const implementedBevyTraits = new Map(
@@ -96,7 +115,7 @@
 
     // Helper function to create a tag element with the given name and href,
     // if available.
-    function createBevyTag(tagName, href) {
+    function createBevyTag(tagName, href, requiredComponents) {
         const el = document.createElement('a');
         const kebabCaseName = tagName.toLowerCase().replace(' ', '-');
 
@@ -106,6 +125,23 @@
 
         el.innerText = tagName;
         el.className = `bevy-tag ${kebabCaseName}-tag`;
+
+        if (requiredComponents.length > 0) {
+            const tooltip = document.createElement('span');
+            tooltip.innerText = `Required Components:`;
+            tooltip.className = `bevy-tooltip`;
+
+            const ul = document.createElement('ul');
+            for (const component of requiredComponents) {
+                const li = document.createElement('li');
+                li.innerText = component;
+                ul.appendChild(li);
+            }
+
+            tooltip.appendChild(ul);
+            el.appendChild(tooltip);
+        }
+
         return el;
     }
 </script>
@@ -130,6 +166,21 @@
         color: white;
     }
 
+    .bevy-tooltip {
+        visibility: hidden;
+        position: absolute;
+        top: 5.5rem;
+        align-items: center;
+        justify-items: center;
+        background-color: BLACK;
+        border-radius: 10%;
+        padding: 0 0.5rem;
+    }
+
+    .bevy-tag:hover .bevy-tooltip {
+        visibility: visible;
+    }
+
     .bevy-tag {
         background-color: var(--tag-color);
     }