Lokales Tag-Handling implementiert

webpage/src/components/Tooltip.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  let { 
+    text = "", 
+    position = 'top',
+    variant = 'default' 
+  } = $props();
+
+  let x = $state(-999);
+  let y = $state(-999);
+  let visible = $state(false);
+
+  export function setPosition(newX: number, newY: number) {
+    x = newX;
+    y = newY;
+    visible = true;
+  }
+
+  export function hideTooltip() {
+    visible = false;
+  }
+
+  // Svelte 5 Reaktivität für dynamische Klassen basierend auf dem Typ
+  let containerClass = $derived(
+    variant === 'warning' ? 'bg-amber-700' :
+    variant === 'danger' ? 'bg-red-700' :
+    'bg-slate-700' // default
+  );
+
+  let arrowClass = $derived(
+    variant === 'warning' ? 'bg-amber-700' :
+    variant === 'danger' ? 'bg-red-700' :
+    'bg-slate-700' // default
+  );
+</script>
+
+<div
+  class="fixed z-[9999] pointer-events-none transition-opacity duration-200 {visible ? 'opacity-100' : 'opacity-0'}"
+  style="left: {x}px; top: {y}px;"
+>
+  <div class="relative text-xs text-white px-2 py-1 rounded shadow-xl max-w-xs {containerClass}">
+    
+    {@html text}
+
+    <div class="absolute w-2 h-2 rotate-45 {arrowClass}
+      {position === 'top' ? 'bottom-[-4px] left-1/2 -translate-x-1/2' : ''}
+      {position === 'bottom' ? 'top-[-4px] left-1/2 -translate-x-1/2' : ''}
+      {position === 'left' ? 'right-[-4px] top-1/2 -translate-y-1/2' : ''}
+      {position === 'right' ? 'left-[-4px] top-1/2 -translate-y-1/2' : ''}"
+    ></div>
+  </div>
+</div>