51 lines
1.4 KiB
Svelte
51 lines
1.4 KiB
Svelte
<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> |