Custom Tooltip Svelte

This is a premium tooltip component built for Svelte 5. It leverages the new runes system for state management and svelte/transition for smooth animations.

Implementation

<script lang="ts">
  import { fade, fly } from 'svelte/transition';
  let { text, children, position = 'top' } = $props();
  let visible = $state(false);
</script>

<div 
  onmouseenter={() => visible = true}
  onmouseleave={() => visible = false}
  class="relative inline-block"
>
  {@render children()}
  {#if visible}
    <div 
      in:fly={{ y: 5, duration: 200 }} 
      out:fade={{ duration: 150 }}
      class="absolute z-50 px-3 py-1 bg-surface-2 border border-border rounded-lg text-xs"
    >
      {text}
    </div>
  {/if}
</div>

Key Features

• Svelte 5 Runes: Uses $state and $props.
• Lightweight: Minimal CSS, fully controlled.
• Animated: smooth fly-in effect.