From 7ab80049976ce1754ba7221ce5641353a137fcfb Mon Sep 17 00:00:00 2001
From: Christopher Whitley <103014489+AristurtleDev@users.noreply.github.com>
Date: Thu, 6 Feb 2025 11:47:32 -0500
Subject: [PATCH 1/2] Remove title, it blocks the tooltip on hover

---
 website/content/resources.njk | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/content/resources.njk b/website/content/resources.njk
index 0b8195ed..032e3ef5 100644
--- a/website/content/resources.njk
+++ b/website/content/resources.njk
@@ -26,7 +26,7 @@ permalink: resources/{{ (category | slugify) if category !== "all" }}/
         <div id="resource-gallery" class="mg-item-grid mg-grid-2">
             {% for resource in resources %}
                 {% if category in resource.tags or category === "all" %}
-                    <a class="mg-no-link hide-external-icon" href="{{ resource.url }}" title="{{ resource.title }}">
+                    <a class="mg-no-link hide-external-icon" href="{{ resource.url }}">
                         <div class="mg-resource-container mg-box-shadow"
                              style="background-image: url('{{ resource.cover }}');">
                             <div class="transparent-overlay"></div>

From c2df672a14a2b2ca1bbc2a510b998ebbd30350aa Mon Sep 17 00:00:00 2001
From: Christopher Whitley <103014489+AristurtleDev@users.noreply.github.com>
Date: Thu, 6 Feb 2025 11:48:45 -0500
Subject: [PATCH 2/2] Add additional tags on hover This adds a tool tip pop up
 that contains the additional tags on hover when there are more than 3 tags
 for a resource.

---
 website/content/resources.njk | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/website/content/resources.njk b/website/content/resources.njk
index 032e3ef5..f833654e 100644
--- a/website/content/resources.njk
+++ b/website/content/resources.njk
@@ -32,8 +32,23 @@ permalink: resources/{{ (category | slugify) if category !== "all" }}/
                             <div class="transparent-overlay"></div>
                             <div class="mg-resource-tags">
                                 {% for tag in resource.tags %}
-                                    <div>{{ tag }}</div>
+                                    {% if loop.index <= 3 %}
+                                        <div>{{ tag }}</div>
+                                    {% endif %}
                                 {% endfor %}
+
+                                {% if resource.tags.length > 3 %}
+                                    {% set additionalTags = '' %}
+                                    {% for tag in resource.tags %}
+                                        {% if loop.index0 >= 3 %}
+                                            {% set additionalTags = additionalTags + tag + '<br/>' %}
+                                        {% endif %}
+                                    {% endfor %}
+                                    <div data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-title="{{ additionalTags }}">
+                                        <div>+{{ resource.tags.length - 3 }}</div>
+                                    </div>
+                                {% endif %}
+
                             </div>
                             <div class="mg-resource-footer">
                                 <div class="mg-resource-title">{{ resource.title }}</div>
@@ -46,3 +61,10 @@ permalink: resources/{{ (category | slugify) if category !== "all" }}/
         </div>
     </section>
 {% endblock %}
+
+{% block scripts %}
+<script type="text/javascript">
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+</script>
+{% endblock %}