<script>
  let { children, content, side = 'top' } = $props()
  let visible = $state(false)

  const sideClass = {
    top:    'bottom-full left-1/2 -translate-x-1/2 mb-2',
    bottom: 'top-full  left-1/2 -translate-x-1/2 mt-2',
    left:   'right-full top-1/2  -translate-y-1/2 mr-2',
    right:  'left-full  top-1/2  -translate-y-1/2 ml-2',
  }[side] ?? 'bottom-full left-1/2 -translate-x-1/2 mb-2'
</script>

<span
  class="relative inline-flex"
  onmouseenter={() => { visible = true }}
  onmouseleave={() => { visible = false }}
  onfocusin={() => { visible = true }}
  onfocusout={() => { visible = false }}
>
  {@render children?.()}
  {#if visible}
    <span
      role="tooltip"
      class="pointer-events-none absolute z-50 whitespace-nowrap rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md {sideClass}"
    >
      {content}
    </span>
  {/if}
</span>
