Tooltip

'use client'

import {
  autoUpdate,
  flip,
  FloatingPortal,
  offset,
  safePolygon,
  shift,
  useDismiss,
  useFloating,
  useFocus,
  useHover,
  useInteractions,
  useMergeRefs,
  useRole,
  type Placement,
} from '@floating-ui/react'
import React, { cloneElement, useState } from 'react'

export function Tooltip({
  label,
  content,
  side = 'top',
  delay = 150,
  disabled = false,
  children,
}: {
  label?: string
  content?: React.ReactNode
  side?: Placement
  delay?: number
  disabled?: boolean
  children: React.ReactElement<Record<string, unknown>>
}) {
  let [open, setOpen] = useState(false)

  let { refs, floatingStyles, context } = useFloating({
    open,
    onOpenChange: setOpen,
    placement: side,
    middleware: [offset(6), flip(), shift({ padding: 8 })],
    whileElementsMounted: autoUpdate,
  })

  let { getReferenceProps, getFloatingProps } = useInteractions([
    useHover(context, { delay: { open: delay, close: 0 }, move: false, handleClose: safePolygon() }),
    useFocus(context),
    useDismiss(context),
    useRole(context, { role: 'tooltip' }),
  ])

  let ref = useMergeRefs([refs.setReference, (children.props as { ref?: React.Ref<Element> }).ref])

  if (disabled) return children

  return (
    <>
      {cloneElement(children, getReferenceProps({ ...children.props, ref }))}
      {open && (
        <FloatingPortal>
          <div
            ref={refs.setFloating}
            style={floatingStyles}
            {...getFloatingProps()}
            className="z-50 flex items-center gap-1.5 rounded-md bg-zinc-950 px-2 py-1 text-xs/5 font-medium text-white dark:bg-zinc-700"
          >
            {content ?? label}
          </div>
        </FloatingPortal>
      )}
    </>
  )
}

<script lang="ts">
export type TooltipSide = 'top' | 'right' | 'bottom' | 'left'
export type TooltipPlacement = TooltipSide | `${TooltipSide}-start` | `${TooltipSide}-end`
</script>

<script setup lang="ts">
import {
  injectTooltipProviderContext,
  TooltipContent,
  TooltipPortal,
  TooltipProvider,
  TooltipRoot,
  TooltipTrigger,
} from 'reka-ui'
import { computed, type SetupContext } from 'vue'

const props = withDefaults(
  defineProps<{
    label?: string
    side?: TooltipPlacement
    delay?: number
    disabled?: boolean
  }>(),
  { label: undefined, side: 'top', delay: 150, disabled: false },
)

const Passthrough = (_: unknown, { slots }: SetupContext) => slots.default?.()

const Provider = injectTooltipProviderContext(null) ? Passthrough : TooltipProvider

const placement = computed(() => {
  const [side, align = 'center'] = props.side.split('-') as [TooltipSide, 'start' | 'end' | 'center' | undefined]
  return { side, align }
})
</script>

<template>
  <component :is="Provider">
    <TooltipRoot :disabled="disabled" :delay-duration="delay">
      <TooltipTrigger as-child>
        <slot />
      </TooltipTrigger>
      <TooltipPortal>
        <TooltipContent
          :side="placement.side"
          :align="placement.align"
          :side-offset="6"
          class="z-50 flex items-center gap-1.5 rounded-md bg-zinc-950 px-2 py-1 text-xs/5 font-medium text-white dark:bg-zinc-700"
        >
          <slot name="content">{{ label }}</slot>
        </TooltipContent>
      </TooltipPortal>
    </TooltipRoot>
  </component>
</template>