that looks so ugly omfg

src/App.tsx

@@ -159,6 +159,8 @@ function App() {
                                                 url='https://yellows.ink/'></SingularOomfie>
                                 <SingularOomfie name='nax' discordid='148801388938264576'
                                                 url='https://nax.dev/'></SingularOomfie>
+                                <SingularOomfie name='squirrelly' discordid='218032723296649217'
+                                                url='https://squirrelly13.neocities.org/'></SingularOomfie>
                                 <SingularOomfie name='ushie' discordid='399862294143696897'
                                                 url='https://ushie.dev/'></SingularOomfie>
                                 <SingularOomfie name='mugman' discordid='601836455006044163'

src/components/comps.tsx

@@ -8,25 +8,57 @@ export function AdvancedBr({ count }: { count: number }) {
     return new Array(count).fill(null).map(_ => (<br />))
 }
 
-export function SingularOomfie(props: { name: string, url: string, discordid: string }) {
+export function SingularOomfie(props: { name: string; url: string; discordid: string }) {
     const [imageSrc, setImageSrc] = createSignal("");
+    const [mousePosition, setMousePosition] = createSignal({ x: 0, y: 0 });
+    const [showTooltip, setShowTooltip] = createSignal(false);
 
     onMount(async () => {
-      const url = await theImager(props.discordid);
+        const url = await theImager(props.discordid);
-      setImageSrc(url);
+        setImageSrc(url);
     });
 
+    const handleMouseMove = (e: MouseEvent) => {
+        setMousePosition({ x: e.clientX, y: e.clientY });
+        setShowTooltip(true);
+    };
+
+    const handleMouseLeave = () => {
+        setShowTooltip(false);
+    };
+
     return (
-      <a href={props.url}>
+        <div
-        <img
+            onMouseMove={handleMouseMove}
-          class="tooltip"
+            onMouseLeave={handleMouseLeave}
-          style={{
+            style={{ position: "relative", display: "inline-block" }}
-            "max-width": "3em",
+        >
-            "border-radius": "30%",
+            <a href={props.url}>
-          }}
+                <img
-          src={imageSrc()}
+                    class="tooltip"
-          alt={"profile picture for" + props.name}
+                    style={{
-        />
+                        "max-width": "3em",
-      </a>
+                        "border-radius": "30%",
+                    }}
+                    src={imageSrc()}
+                    alt={"profile picture for " + props.name}
+                />
+            </a>
+            {showTooltip() && (
+                <div
+                    style={{
+                        position: "absolute",
+                        background: "rgba(0, 0, 0, 0.7)",
+                        color: "white",
+                        padding: "0.5em",
+                        "border-radius": "5px",
+                        "pointer-events": "none",
+                        transform: "translate(20%, -100%)",
+                    }}
+                >
+                    {props.name}
+                </div>
+            )}
+        </div>
     );
 }