Tooltip cartográfico.

<aside class="ui-sample ui-map" data-map-tooltip="true" role="tooltip"><strong>Santiago</strong><dl><div><dt>Buses activos</dt><dd>1.284</dd></div><div><dt>Actualizado</dt><dd>18:24 CLT</dd></div></dl><small>Fuente: DTPM</small></aside>

<aside class="ui-sample ui-map border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-map-tooltip="true" role="tooltip"><strong>Santiago</strong><dl class="grid gap-2"><div><dt>Buses activos</dt><dd>1.284</dd></div><div><dt>Actualizado</dt><dd>18:24 CLT</dd></div></dl><small class="text-sm text-slate-600">Fuente: DTPM</small></aside>

export interface MapTooltipItem {
  /** Nombre del dato (`<dt>`). */
  label: string;
  /** Valor ya formateado, con unidad si corresponde. */
  value: string;
}

export interface MapTooltipProps {
  /** Id del tooltip, para referirlo con `aria-describedby` desde la zona o el marcador. */
  id?: string;
  /** Nombre del lugar bajo el puntero. */
  title?: string;
  /** Datos del lugar como pares etiqueta y valor. */
  items?: MapTooltipItem[];
  /** Origen de los datos, con su prefijo («Fuente: …»); vacío lo oculta. */
  source?: string;
  className?: string;
}

const DATOS: MapTooltipItem[] = [
  { label: "Buses activos", value: "1.284" },
  { label: "Actualizado", value: "18:24 CLT" },
];

/**
 * Información emergente (tooltip) que se muestra al pasar el puntero o el foco por un lugar del mapa: nombre del lugar, sus datos como pares etiqueta y valor, y la fuente.
 *
 * Tiene `role="tooltip"`; pasa un `id` y refiérelo con `aria-describedby` desde la zona o el marcador que lo abre.
 *
 * @example <MapTooltip id="tip-maipu" title="Maipú" items={[{ label: "Buses activos", value: "842" }, { label: "Actualizado", value: "18:24 CLT" }]} />
 */
export function MapTooltip({
  id,
  title = "Santiago",
  items = DATOS,
  source = "Fuente: DTPM",
  className,
}: MapTooltipProps) {
  return (
    <aside className={["ui-map", className].filter(Boolean).join(" ")} id={id} data-map-tooltip role="tooltip">
      {title ? <strong>{title}</strong> : null}
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {source ? <small>{source}</small> : null}
    </aside>
  );
}