yaak/src-web/components/core/Tooltip.tsx

import classNames from 'classnames';
import type { CSSProperties, KeyboardEvent, ReactNode } from 'react';
import { useRef, useState } from 'react';
import { generateId } from '../../lib/generateId';
import { Portal } from '../Portal';

export interface TooltipProps {
  children: ReactNode;
  content: ReactNode;
  tabIndex?: number;
  size?: 'md' | 'lg';
  className?: string;
}

const hiddenStyles: CSSProperties = {
  left: -99999,
  top: -99999,
  visibility: 'hidden',
  pointerEvents: 'none',
  opacity: 0,
};

type TooltipPosition = 'top' | 'bottom';

interface TooltipOpenState {
  styles: CSSProperties;
  position: TooltipPosition;
}

export function Tooltip({ children, className, content, tabIndex, size = 'md' }: TooltipProps) {
  const [openState, setOpenState] = useState<TooltipOpenState | null>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const tooltipRef = useRef<HTMLDivElement>(null);
  const showTimeout = useRef<NodeJS.Timeout>(undefined);

  const handleOpenImmediate = () => {
    if (triggerRef.current == null || tooltipRef.current == null) return;
    clearTimeout(showTimeout.current);
    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();
    const viewportHeight = document.documentElement.clientHeight;

    const margin = 8;
    const spaceAbove = Math.max(0, triggerRect.top - margin);
    const spaceBelow = Math.max(0, viewportHeight - triggerRect.bottom - margin);
    const preferBottom = spaceAbove < tooltipRect.height + margin && spaceBelow > spaceAbove;
    const position: TooltipPosition = preferBottom ? 'bottom' : 'top';

    const styles: CSSProperties = {
      left: Math.max(0, triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2),
      maxHeight: position === 'top' ? spaceAbove : spaceBelow,
      ...(position === 'top'
        ? { bottom: viewportHeight - triggerRect.top }
        : { top: triggerRect.bottom }),
    };

    setOpenState({ styles, position });
  };

  const handleOpen = () => {
    clearTimeout(showTimeout.current);
    showTimeout.current = setTimeout(handleOpenImmediate, 500);
  };

  const handleClose = () => {
    clearTimeout(showTimeout.current);
    setOpenState(null);
  };

  const handleToggleImmediate = () => {
    if (openState) handleClose();
    else handleOpenImmediate();
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
    if (openState && e.key === 'Escape') {
      e.preventDefault();
      e.stopPropagation();
      handleClose();
    }
  };

  const id = useRef(`tooltip-${generateId()}`);

  return (
    <>
      <Portal name="tooltip">
        <div
          ref={tooltipRef}
          style={openState?.styles ?? hiddenStyles}
          id={id.current}
          role="tooltip"
          aria-hidden={openState == null}
          onMouseEnter={handleOpenImmediate}
          onMouseLeave={handleClose}
          className="p-2 fixed z-50 text-sm transition-opacity grid grid-rows-[minmax(0,1fr)]"
        >
          <div
            className={classNames(
              'bg-surface-highlight rounded-md px-3 py-2 z-50 border border-border overflow-auto',
              size === 'md' && 'max-w-sm',
              size === 'lg' && 'max-w-md',
            )}
          >
            {content}
          </div>
          <Triangle
            className="text-border"
            position={openState?.position === 'bottom' ? 'top' : 'bottom'}
          />
        </div>
      </Portal>
      {/* oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- Needs to be usable in other buttons */}
      <span
        ref={triggerRef}
        role="button"
        aria-describedby={openState ? id.current : undefined}
        tabIndex={tabIndex ?? -1}
        className={classNames(className, 'flex-grow-0 flex items-center')}
        onClick={handleToggleImmediate}
        onMouseEnter={handleOpen}
        onMouseLeave={handleClose}
        onFocus={handleOpenImmediate}
        onBlur={handleClose}
        onKeyDown={handleKeyDown}
      >
        {children}
      </span>
    </>
  );
}

function Triangle({ className, position }: { className?: string; position: 'top' | 'bottom' }) {
  const isBottom = position === 'bottom';

  return (
    <svg
      aria-hidden
      viewBox="0 0 30 10"
      preserveAspectRatio="none"
      shapeRendering="crispEdges"
      className={classNames(
        className,
        'absolute z-50 left-[calc(50%-0.4rem)] h-[0.5rem] w-[0.8rem]',
        isBottom
          ? 'border-t-[2px] border-surface-highlight -bottom-[calc(0.5rem-3px)] mb-2'
          : 'border-b-[2px] border-surface-highlight -top-[calc(0.5rem-3px)] mt-2',
      )}
    >
      <title>Triangle</title>
      <polygon
        className="fill-surface-highlight"
        points={isBottom ? '0,0 30,0 15,10' : '0,10 30,10 15,0'}
      />
      <path
        d={isBottom ? 'M0 0 L15 9 L30 0' : 'M0 10 L15 1 L30 10'}
        fill="none"
        stroke="currentColor"
        strokeWidth="1"
        strokeLinejoin="miter"
        vectorEffect="non-scaling-stroke"
      />
    </svg>
  );
}