Sync styleguide 2026.05.18.1

docs/styleguide/components/interactive-elements.html

@@ -836,6 +836,21 @@
     </span>
   </section>
 
+  <!-- Component: Tooltip -->
+  <section id="component-tooltip">
+    <p class="sg-preview-label">Component: Tooltip</p>
+
+    <span class="sg-tooltip-wrap" data-component="tooltip">
+      <button class="sg-interaction-element sg-button sg-button--active" type="button" aria-describedby="component-tooltip-panel" aria-expanded="false" data-component-part="tooltip-trigger">
+        Tooltip anzeigen
+      </button>
+
+      <span class="sg-tooltip-panel sg-table-label" id="component-tooltip-panel" role="tooltip" hidden data-component-part="tooltip-panel">
+        Diese Sprechblase ist trigger-verankert und wechselt bei fehlendem Platz automatisch die Seite.
+      </span>
+    </span>
+  </section>
+
 
   <!-- Component: Hyperlink -->
   <section id="component-hyperlink">
@@ -847,6 +862,7 @@
   </section>
 
   <script src="../scripts/help-icon-overlays.js"></script>
+  <script src="../scripts/tooltip-overlays.js"></script>
   <section id="component-file-input">
     <p class="sg-preview-label">Component: File Input</p>
       <div class="sg-form-preview-area">