<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>
