fixed tooltip placement

src/_includes/icons/index.njk

@@ -10,6 +10,7 @@
   {% endif %}
 {% endfor %}
 
+
 <sbb-card color="milk" size="xxl">
   <div id="icons">
     <div class="icons-header">
@@ -22,12 +23,12 @@
     <div class="list icons">
         {% include "./list-icons.njk" %}
     </div>
-    <div class="tooltips">
-      {% include "./list-tooltips.njk" %}
-    </div>
   </div>
   {% include "./not-found.njk" %}
-</sbb-card>
+ </sbb-card>
+<div class="tooltips">
+  {% include "./list-tooltips.njk" %}
+</div>
 
 {% if mode == "KOM" %}
 <script src="/assets/js/icons-kom.js"></script>

src/_includes/icons/item.njk

@@ -1,15 +1,5 @@
+{% if (icon.type == mode) %}
 <sbb-tooltip-trigger class="icon {{ icon.mode }}" data-category="{{icon.category}}" data-id="{{icon.name}}" data-name="{{icon.name}}" data-size="{{icon.size}}" id="{{ icon.name }}" aria-describedby="{{ icon.name }}-content">
-    <sbb-icon name="{% if mode == "Pictograms" %}picto:{% endif %}{{icon.name}}" alt="{{ icon.name }}"></sbb-icon>
-    <div class="only-for-search">
-        {{ icon.name }}<br>
-        {% if mode == "KOM" %}{{ icon.group }}<br>{% endif %}
-        {{ icon.category }}<br>
-        {% if mode == "Pictograms" %}{{ icon.subcategory }}<br>{% endif %}
-        {{ icon.tags }}<br>
-        {% if mode == "KOM" %}
-            {% for size in icon.sizes %}
-                {{size.size}}
-            {% endfor %}
-        {% endif %}
-    </div>
-</sbb-tooltip-trigger>
+    <sbb-icon name="{% if mode == "Pictograms" %}picto:{% endif %}{{icon.name}}" alt="{{ icon.name }}"></sbb-icon><div class="only-for-search">{{ icon.name }}<br>{% if mode == "KOM" %}{{ icon.group }}<br>{% endif %}{{ icon.category }}<br>{% if mode == "Pictograms" %}{{ icon.subcategory }}<br>{% endif %}{{ icon.tags }}<br>{% if mode == "KOM" %}{% for size in icon.sizes %}{{size.size}}{% endfor %}{% endif %}</div>
+</sbb-tooltip-trigger>
+{% endif %}

src/_includes/icons/list-icons.njk

@@ -1,9 +1,5 @@
 {% for category in categories %}
-    <sbb-title level="4"  id="{{category}}" data-category="{{category}}" data-id="id-{{category}}" data-name="{{category}}" data-size="small, medium, large">{{category}}</sbb-title>
-    {% for icon in icons %}
-        {% if category == icon.category %}
-            {% include "./item.njk" %}
-        {% endif %}
-    {% endfor %}
+<sbb-title level="4"  id="{{category}}" data-category="{{category}}" data-id="id-{{category}}" data-name="{{category}}" data-size="small, medium, large">{{category}}</sbb-title>
+{% for icon in icons %}{% if category == icon.category %}{% include "./item.njk" %}{% endif %}{% endfor %}
 {% endfor %}
 

src/_includes/icons/list-tooltips.njk

@@ -1,26 +1,28 @@
 {% for icon in icons %}
-    <sbb-tooltip id="{{ icon.name }}" trigger="{{ icon.name }}" hover-trigger="true">
-        <div class="icon-content" id="{{ icon.name }}-content">
-            <sbb-title level="5">{{ icon.name }}</sbb-title>
-            <p class="sbb-text-s tooltip-max-width">
-                {{ translations[page.lang].iconcategory }}: {{ icon.category }}<br>
-                {% if mode == "Pictograms" %}
-                {% else %}
-                {{ translations[page.lang].icontags }}: {{ icon.tags }}
-                {% endif %}
-            </p>
-            {% if mode == "KOM" %}
-                <div class="icon-items">
-                    {% for size in icon.sizes %}
-                    <div class="icon-item">
-                        <div class="icon-preview">
-                        <sbb-icon name="{{icon.group}}-{{size}}" alt="{{image.group}}-{{size}}"></sbb-icon>
-                        </div>
-                        <p class="sbb-text-s">{{size}}</p>
+{% if (icon.type == mode) %}
+<sbb-tooltip id="{{ icon.name }}-trigger" trigger="{{ icon.name }}" hover-trigger="true">
+    <div class="icon-content" id="{{ icon.name }}-content">
+        <sbb-title level="5">{{ icon.name }}</sbb-title>
+        <p class="sbb-text-s tooltip-max-width">
+            {{ translations[page.lang].iconcategory }}: {{ icon.category }}<br>
+            {% if mode == "Pictograms" %}
+            {% else %}
+            {{ translations[page.lang].icontags }}: {{ icon.tags }}
+            {% endif %}
+        </p>
+        {% if mode == "KOM" %}
+            <div class="icon-items">
+                {% for size in icon.sizes %}
+                <div class="icon-item">
+                    <div class="icon-preview">
+                    <sbb-icon name="{{icon.group}}-{{size}}" alt="{{image.group}}-{{size}}"></sbb-icon>
                     </div>
-                    {% endfor %}
+                    <p class="sbb-text-s">{{size}}</p>
                 </div>
-            {% endif %}
-        </div>
-    </sbb-tooltip>
+                {% endfor %}
+            </div>
+        {% endif %}
+    </div>
+</sbb-tooltip>
+{% endif %}
 {% endfor %}