Tooltip.

<div class="ui-sample ui-tooltip" data-tooltip="true"><button class="btn btn--secondary" type="button" aria-describedby="tip-0">Cobertura</button><span id="tip-0" role="tooltip">16 regiones · mayo a julio de 2026</span></div>

<div class="ui-sample ui-tooltip border border-slate-300 bg-white p-4 text-slate-950" data-tooltip="true"><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-describedby="tip-0">Cobertura</button><span id="tip-0" role="tooltip">16 regiones · mayo a julio de 2026</span></div>

import type { MouseEventHandler } from "react";

export interface TooltipProps {
  /** Texto del botón que lleva la ayuda. */
  triggerLabel?: string;
  /** Id de la ayuda, referido por `aria-describedby`. Usa uno distinto por tooltip en la página. */
  id?: string;
  /** Texto breve de la ayuda. */
  description?: string;
  /** Muestra la ayuda sin esperar el puntero ni el foco (clase `is-open`), por ejemplo en una vista estática o un recorrido guiado. */
  open?: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Ayuda breve asociada a un botón, que se muestra al pasar el puntero o al enfocar; se usa para aclarar una etiqueta sin ocupar espacio fijo.
 *
 * La ayuda describe el botón con `aria-describedby`. No pongas en ella información indispensable ni enlaces: para eso está `Popover`. Con `open` queda visible sin pasar el puntero.
 *
 * @example <Tooltip id="cobertura-ayuda" triggerLabel="Cobertura" description="14 de 16 regiones" />
 * @example <Tooltip id="cobertura-ayuda" description="14 de 16 regiones" open />
 */
export function Tooltip({
  triggerLabel = "Cobertura",
  id = "tip-0",
  description = "16 regiones · mayo a julio de 2026",
  open = false,
  onClick,
  className,
}: TooltipProps) {
  return (
    <div className={["ui-tooltip", open ? "is-open" : "", className].filter(Boolean).join(" ")} data-tooltip>
      <button className="btn btn--secondary" type="button" aria-describedby={description ? id : undefined} onClick={onClick}>{triggerLabel}</button>
      {description ? <span id={id} role="tooltip">{description}</span> : null}
    </div>
  );
}