[+] Slot tooltip

AquaNet/src/components/Tooltip.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+
+  export let triggeredBy: string
+  let isHovered = false
+  let x: number, y: number
+  let targets: Element[] = []
+
+  onMount(() => {
+    targets = [...document.querySelectorAll(triggeredBy)]
+    targets.forEach((el) => {
+      el.addEventListener('mouseover', mouseOver)
+      el.addEventListener('mousemove', mouseMove)
+      el.addEventListener('mouseleave', mouseLeave)
+    })
+    if (targets.length === 0) {
+      console.warn(`No elements found with selector "${triggeredBy}"`)
+    }
+  })
+
+  onDestroy(() => {
+    targets.forEach((el) => {
+      el.removeEventListener('mouseover', mouseOver)
+      el.removeEventListener('mousemove', mouseMove)
+      el.removeEventListener('mouseleave', mouseLeave)
+    })
+  })
+
+  function mouseOver(event: MouseEvent) {
+    console.log('over')
+    isHovered = true
+    updatePosition(event)
+  }
+
+  function mouseMove(event: MouseEvent) {
+    console.log('move')
+    updatePosition(event)
+  }
+
+  function updatePosition(event: MouseEvent) {
+    x = event.pageX + 5
+    y = event.pageY + 20
+  }
+
+  function mouseLeave() {
+    console.log('leave')
+    isHovered = false
+  }
+</script>
+
+{#if isHovered}
+  <div style="top: {y}px; left: {x}px" class="tooltip">
+    <slot />
+  </div>
+{/if}
+
+<style lang="sass">
+  @import "../vars"
+
+  .tooltip
+    position: fixed
+    z-index: 1000
+    background: white
+    padding: 10px 16px
+    border-radius: $border-radius
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
+    pointer-events: none
+    white-space: nowrap
+    color: #242424
+    transform: translate(-50%, 0)
+</style>