New article

src/lib/components/Tooltip.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  let isHovered = false;
+  let x: number;
+  let y: number;
+
+  function mouseOver(event: MouseEvent) {
+    isHovered = true;
+    x = event.pageX + 5;
+    y = event.pageY + 5;
+  }
+  function mouseMove(event: MouseEvent) {
+    x = event.pageX + 5;
+    y = event.pageY + 5;
+  }
+  function mouseLeave() {
+    isHovered = false;
+  }
+</script>
+
+<span
+  on:mouseover={mouseOver}
+  on:mouseleave={mouseLeave}
+  on:mousemove={mouseMove}
+>
+  <slot />
+</span>
+
+{#if isHovered}
+  <div
+    style="top: {y}px; left: {x}px;"
+    class="tooltip"
+  >
+    <slot name="title"></slot>
+  </div>
+{/if}
+
+<style>
+  .tooltip {
+    position: absolute;
+    padding: 8px 16px;
+    background-color: theme(colors.slate.900);
+    border: 1px solid theme(colors.slate.500);
+    border-radius: 8px;
+  }
+</style>