Tooltip

"use client";

import {
  useEffect,
  useId,
  useRef,
  useState,
  type ComponentProps,
  type FocusEvent,
  type ReactNode,
  type ToggleEvent,
} from "react";
import "./tooltip.css";

export type TooltipProps = Omit<ComponentProps<"span">, "content"> & {
  /** The label. Short, plain text: a tooltip holds no links or buttons. */
  content: ReactNode;
  placement?: "top" | "bottom";
  /** Milliseconds the pointer rests before it shows. Keyboard focus shows it at once. */
  delay?: number;
  /** One focusable control. It gets aria-describedby pointing at the tooltip. */
  children: ReactNode;
};

/* Must match the @supports condition in tooltip.css exactly. */
const ANCHOR_SUPPORT = "(anchor-name: --a) and (position-area: top) and (position-try-fallbacks: flip-block)";

function anchorSupported() {
  return typeof CSS !== "undefined" && CSS.supports(ANCHOR_SUPPORT);
}

/** Fallback for engines without anchor positioning: centred on the trigger, kept in the viewport. */
function place(trigger: Element, bubble: HTMLElement, placement: "top" | "bottom") {
  const box = trigger.getBoundingClientRect();
  const viewWidth = document.documentElement.clientWidth;
  const viewHeight = document.documentElement.clientHeight;
  const gap = parseFloat(getComputedStyle(bubble).marginTop) || 0;
  const height = bubble.offsetHeight + gap;
  let top = placement === "top";
  if (bubble.offsetHeight > 0) {
    if (top && box.top - height < 0 && box.bottom + height <= viewHeight) top = false;
    else if (!top && box.bottom + height > viewHeight && box.top - height >= 0) top = true;
  }
  const edge = 4;
  const left = box.left + box.width / 2 - bubble.offsetWidth / 2;
  const style = bubble.style;
  style.left = `${Math.max(edge, Math.min(left, viewWidth - bubble.offsetWidth - edge))}px`;
  style.right = "auto";
  style.top = top ? "auto" : `${box.bottom}px`;
  style.bottom = top ? `${viewHeight - box.top}px` : "auto";
}

export function Tooltip({
  content,
  placement = "top",
  delay = 400,
  className,
  style,
  children,
  onToggle,
  onMouseEnter,
  onMouseLeave,
  ...rest
}: TooltipProps) {
  const id = useId();
  const anchorName = `--eq-tooltip-${id.replace(/[^\w-]/g, "")}`;
  const trigger = useRef<HTMLSpanElement>(null);
  const timer = useRef<number | undefined>(undefined);
  const [open, setOpen] = useState(false);

  // Describe the control itself, not the wrapper, so it is read when the control takes focus.
  useEffect(() => {
    const control = trigger.current?.firstElementChild;
    if (!control) return;
    const own = (control.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
    if (!own.includes(id)) control.setAttribute("aria-describedby", [...own, id].join(" "));
    return () => {
      const left = (control.getAttribute("aria-describedby") ?? "")
        .split(/\s+/)
        .filter((token) => token && token !== id);
      if (left.length) control.setAttribute("aria-describedby", left.join(" "));
      else control.removeAttribute("aria-describedby");
    };
  }, [id]);

  useEffect(() => () => window.clearTimeout(timer.current), []);

  // Escape hides it without also closing a dialog or popover it sits in.
  useEffect(() => {
    if (!open) return;
    function onKeyDown(event: KeyboardEvent) {
      if (event.key !== "Escape") return;
      event.preventDefault();
      hide();
    }
    document.addEventListener("keydown", onKeyDown, true);
    return () => document.removeEventListener("keydown", onKeyDown, true);
  });

  function later(action: () => void, ms: number) {
    window.clearTimeout(timer.current);
    timer.current = window.setTimeout(action, ms);
  }

  function show() {
    window.clearTimeout(timer.current);
    const bubble = document.getElementById(id);
    const anchor = trigger.current?.firstElementChild ?? trigger.current;
    if (!bubble || !anchor || bubble.matches(":popover-open")) return;
    const fallback = !anchorSupported();
    if (fallback) place(anchor, bubble, placement);
    bubble.showPopover();
    // Second pass now that the bubble has a size, to centre and flip it.
    if (fallback) place(anchor, bubble, placement);
  }

  function hide() {
    window.clearTimeout(timer.current);
    const bubble = document.getElementById(id);
    if (bubble?.matches(":popover-open")) bubble.hidePopover();
  }

  function handleFocus(event: FocusEvent<HTMLSpanElement>) {
    // Keyboard focus shows it at once; a mouse click already had the hover.
    if (event.target.matches(":focus-visible")) show();
  }

  return (
    <>
      <span
        ref={trigger}
        className="eq-tooltip-trigger"
        style={{ anchorName }}
        onMouseEnter={() => later(show, delay)}
        onMouseLeave={() => later(hide, 100)}
        onFocus={handleFocus}
        onBlur={hide}
      >
        {children}
      </span>
      <span
        {...rest}
        id={id}
        role="tooltip"
        popover="manual"
        className={["eq-tooltip", className].filter(Boolean).join(" ")}
        data-placement={placement}
        style={{ positionAnchor: anchorName, ...style }}
        onToggle={(event: ToggleEvent<HTMLSpanElement>) => {
          onToggle?.(event);
          setOpen(event.newState === "open");
        }}
        onMouseEnter={(event) => {
          onMouseEnter?.(event);
          window.clearTimeout(timer.current);
        }}
        onMouseLeave={(event) => {
          onMouseLeave?.(event);
          later(hide, 100);
        }}
      >
        {content}
      </span>
    </>
  );
}