Tooltip

"use client";

import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";

type ClassName<State> = string | ((state: State) => string | undefined) | undefined;

function cx(...classes: (string | false | null | undefined)[]) {
  return classes.filter(Boolean).join(" ");
}

/** Prepends base classes while keeping Base UI's state-function form of className working. */
function withBase<State>(base: string, className: ClassName<State>) {
  return typeof className === "function" ? (state: State) => cx(base, className(state)) : cx(base, className);
}

/**
 * Shares hover delays across tooltips, so moving between triggers opens the next tooltip
 * instantly. Optional; wrap your app or a toolbar in it.
 */
export const TooltipProvider = BaseTooltip.Provider;

/** Groups the tooltip parts and holds its open state. */
export const Tooltip = BaseTooltip.Root;

/**
 * The element that shows the tooltip on hover and keyboard focus. Renders a `<button>`;
 * pass `render={<Button />}` to reuse your button, and give icon-only triggers an `aria-label`.
 */
export const TooltipTrigger = BaseTooltip.Trigger;

type PositionerProps = BaseTooltip.Positioner.Props;

export interface TooltipContentProps extends BaseTooltip.Popup.Props {
  /** Side of the trigger to place the tooltip on. Flips when there is not enough room. */
  side?: PositionerProps["side"];
  /** Alignment against the trigger on the chosen side. */
  align?: PositionerProps["align"];
  /** Gap between the trigger and the tooltip, in pixels. */
  sideOffset?: PositionerProps["sideOffset"];
  /** Shows an arrow pointing at the trigger. */
  arrow?: boolean;
  /** Classes for the positioner wrapper, for example to change the z-index. */
  positionerClassName?: string;
  /** Element to portal into. Defaults to `document.body`. */
  container?: BaseTooltip.Portal.Props["container"];
}

/** The tooltip bubble, rendered in a portal and positioned against the trigger. */
export function TooltipContent({
  side = "top",
  align = "center",
  sideOffset = 6,
  arrow = true,
  positionerClassName,
  container,
  className,
  children,
  ...props
}: TooltipContentProps) {
  return (
    <BaseTooltip.Portal container={container}>
      <BaseTooltip.Positioner side={side} align={align} sideOffset={sideOffset} className={cx("z-50", positionerClassName)}>
        <BaseTooltip.Popup
          className={withBase(
            cx(
              "relative max-w-xs origin-(--transform-origin) rounded-md bg-zinc-900 px-2 py-1 text-xs font-medium text-white shadow-md",
              "dark:bg-zinc-100 dark:text-zinc-900",
              "transition-[opacity,scale] duration-100 ease-out motion-reduce:transition-none",
              "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
              "motion-safe:data-[starting-style]:scale-95 motion-safe:data-[ending-style]:scale-95",
              // Skip the fade when moving between triggers inside a TooltipProvider.
              "data-[instant]:transition-none",
            ),
            className,
          )}
          {...props}
        >
          {arrow ? (
            <BaseTooltip.Arrow
              className={cx(
                "size-2 rotate-45 bg-zinc-900 dark:bg-zinc-100",
                "data-[side=bottom]:-top-1 data-[side=top]:-bottom-1 data-[side=left]:-right-1 data-[side=right]:-left-1",
              )}
            />
          ) : null}
          {children}
        </BaseTooltip.Popup>
      </BaseTooltip.Positioner>
    </BaseTooltip.Portal>
  );
}