Use accessible stylised tooltips for adoptables

src/assets/css/components.css

@@ -123,6 +123,9 @@ a.link-btn[href^="http"]:not([href*="leilukin.com"]) { padding-right: calc(var(-
 
 /* Adoptables wrapper */
 .adoptables {
+    list-style-type: "";
+    margin: 0;
+    padding: 0;
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;

src/pages/adoptables.njk

@@ -2,32 +2,39 @@
 title: Adoptables
 desc: A collection of creatures and stuff I have adopted from other websites.
 isContentDivided: true
+hasTooltips: true
 eleventyNavigation:
     order: 7
 ---
 
+{%- macro adoptable(url, file, alt, tooltip=alt) -%}
+    <li data-tooltip>
+        <a href="{{ url }}" data-tooltip-trigger title="{{ tooltip }}">
+            <img src="/assets/adoptables/{{ file }}" alt="{{ alt }}" loading="lazy">
+        </a>
+    </li>
+{%- endmacro -%}
+
 <section class="content__section">
     <h2>Personal Website Adoptables</h2>
     <p>These are adopted from other personal websites.</p>
 
-    <div class="adoptables">
-        <a href="https://xandra.cc/" title="Diddles the raccoon by Alexandra">
-            <img src="/assets/adoptables/diddles-alexandra.png" alt="Diddles the raccoon by Alexandra" loading="lazy">
-        </a>
-        <a href="https://lostletters.neocities.org/" title="Moomin pixel art by Lost Letters">
-            <img src="/assets/adoptables/lostletters-moomin.png" alt="Moomin pixel art by Lost Letters" loading="lazy">
-        </a>
-    </div>
+    <ul class="adoptables">
+        {{ adoptable("https://xandra.cc/", "alexandra-diddles.png", "Diddles the raccoon by Alexandra") }}
+        {{ adoptable("https://lostletters.neocities.org/", "lostletters-moomin.png", "Moomin pixel art by Lost Letters") }}
+    </ul>
 </section>
 
 <section class="content__section">
     <h2>32-Bit Cafe Code Jam: Destination Vacation</h2>
     <p>Stuff I collected from <a href="https://tilde.32bit.cafe/~ribose/events/destination/map.html">32-Bit Cafe's Community Code Jam #4: Destination Vacation</a> in June 2024, including a passport with stamps from the code jam entries, and extra goodies from some of the participants.</p>
-    <div class="adoptables">
+    <ul class="adoptables">
+        <li>
             <img src="/assets/adoptables/32bitcafe-vacation/passport.png" alt="32-Bit Cafe's Destination Vacation code jam passport with stamps" loading="lazy">
-        <a href="https://xandra.cc/codejam/vacation/" title="Alexandra's stamp"><img src="/assets/adoptables/32bitcafe-vacation/alexandra-stamp.png" alt="Alexandra's stamp" loading="lazy"></a>
-        <a href="https://ribo.zone/sunday/fish/" title="Ribose's fishing button"><img src="/assets/adoptables/32bitcafe-vacation/ribose-riverfish.png" alt="Ribose's fishing button" loading="lazy"></a>
-    </div>
+        </li>
+        {{ adoptable("https://xandra.cc/codejam/vacation/", "32bitcafe-vacation/alexandra-stamp.png", "Alexandra's stamp") }}
+        {{ adoptable("https://ribo.zone/sunday/fish/", "32bitcafe-vacation/ribose-riverfish.png", "Ribose's fishing button") }}
+    </ul>
 </section>
 
 {% include "main/virtualpets.njk" %}