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.

Author: AristurtleDev

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 %}