@props({'text': '', 'side': 'top'})
<span data-slot="tooltip" class="group/tooltip relative inline-flex">
  {{ slot }}
  <span role="tooltip" {{ attributes.cn(
      "pointer-events-none absolute z-50 w-max max-w-xs rounded-md bg-foreground px-3 py-1.5 text-xs text-background opacity-0 transition-opacity group-hover/tooltip:opacity-100 group-focus-within/tooltip:opacity-100",
      {
          'top': 'bottom-full left-1/2 mb-2 -translate-x-1/2',
          'bottom': 'top-full left-1/2 mt-2 -translate-x-1/2',
          'left': 'right-full top-1/2 mr-2 -translate-y-1/2',
          'right': 'left-full top-1/2 ml-2 -translate-y-1/2',
      }[side],
  ) }}>{{ text }}</span>
</span>