[+] 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>

AquaNet/src/libs/ui.ts

@@ -111,7 +111,7 @@ export const coverNotFound = (e: Event) => (e.target as HTMLImageElement).src =
 /**
  * use:tooltip
  */
-export function tooltip(element: HTMLElement, params: { text: string } | string) {
+export function tooltip(element: HTMLElement, params: { text: string, dom: HTMLElement } | string | HTMLElement) {
   // Create div if not exists
   if (!document.querySelector('.aqua-tooltip')) {
     const div = document.createElement('div')
@@ -125,7 +125,9 @@ export function tooltip(element: HTMLElement, params: { text: string } | string)
 
   let isFocus = false
   let div: HTMLDivElement = document.querySelector('.aqua-tooltip')!
-  const p = typeof params === 'string' ? { text: params } : params
+  const p: string = typeof params === 'string' ? params
+    : 'dom' in params ? params.dom.outerHTML
+    : params.outerHTML
 
   function updatePosition(event: MouseEvent) {
     div.style.top = `${event.pageY + 10}px`;
@@ -134,7 +136,7 @@ export function tooltip(element: HTMLElement, params: { text: string } | string)
 
   function mouseOver(event: MouseEvent) {
     if (isFocus) return
-    div.textContent = p.text;
+    div.innerHTML = p;
     div.style.display = ''
     updatePosition(event);
     isFocus = true;