Reactで、画像の上の点を押すと説明が出る表示を作る方法

const spots: Spot[] = [
  { id: 'plant', x: 12, y: 38, title: '観葉植物', body: '机の左の端に置いた、小さな鉢植えです。' },
  { id: 'monitor', x: 50, y: 30, title: 'モニター', body: '机の真ん中に置いた画面です。' },
  { id: 'mug', x: 84, y: 68, title: 'マグカップ', body: '右の手前に置いた、ふた付きのカップです。' },
  { id: 'keyboard', x: 46, y: 80, title: 'キーボード', body: 'モニターの手前に置いた、幅の狭いキーボードです。' },
];

import { useEffect, useId, useRef, useState } from 'react';

export type Spot = {
  id: string;
  x: number; // 画像の幅に対する横の位置（%）
  y: number; // 画像の高さに対する縦の位置（%）
  title: string;
  body: string;
};

type Props = { src: string; alt: string; spots: Spot[] };

export function ImageHotspots({ src, alt, spots }: Props) {
  const [openId, setOpenId] = useState<string | null>(null);
  const rootRef = useRef<HTMLDivElement>(null);
  const baseId = useId();

  // 開いている間だけ、Esc キーと外側のクリックを待つ
  useEffect(() => {
    if (openId === null) return;
    const openSpot = () => rootRef.current?.querySelector<HTMLElement>(`[data-spot="${openId}"]`);
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key !== 'Escape') return;
      openSpot()?.querySelector('button')?.focus(); // 開いていた点のボタンにフォーカスを戻す
      setOpenId(null);
    };
    const onPointerDown = (e: PointerEvent) => {
      // 開いている点（ボタンと説明）の外を押したら閉じる
      if (!openSpot()?.contains(e.target as Node)) setOpenId(null);
    };
    document.addEventListener('keydown', onKeyDown);
    document.addEventListener('pointerdown', onPointerDown);
    return () => {
      document.removeEventListener('keydown', onKeyDown);
      document.removeEventListener('pointerdown', onPointerDown);
    };
  }, [openId]);

  return (
    <div className="hotspots" ref={rootRef}>
      <img src={src} alt={alt} />
      {spots.map((spot, i) => {
        const open = spot.id === openId;
        const panelId = `${baseId}-${spot.id}`;
        // 右半分の点は説明を左に、下半分の点は説明を上に出す
        const side = `${spot.x > 50 ? 'left' : 'right'} ${spot.y > 50 ? 'above' : 'below'}`;
        return (
          <div
            key={spot.id}
            className="spot"
            data-spot={spot.id}
            style={{ left: `${spot.x}%`, top: `${spot.y}%`, zIndex: open ? 2 : 1 }}
          >
            <button
              type="button"
              className="spot-button"
              aria-expanded={open}
              aria-controls={panelId}
              onClick={() => setOpenId(open ? null : spot.id)}
            >
              <span aria-hidden="true">{i + 1}</span>
              <span className="visually-hidden">{spot.title}</span>
            </button>
            <div id={panelId} className={`spot-panel ${side}`} hidden={!open}>
              <strong>{spot.title}</strong>
              <p>{spot.body}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

createRoot(document.getElementById('root')!).render(
  <ImageHotspots src="desk.svg" alt="作業机のイラスト。モニター、キーボード、マグカップ、観葉植物が置いてある" spots={spots} />,
);

.hotspots { position: relative; max-width: 720px; container-type: inline-size; }
.hotspots img { display: block; width: 100%; height: auto; }
.spot { position: absolute; transform: translate(-50%, -50%); }
.spot-button {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff;
  background: #067a98; color: #fff; font: 700 16px/1 sans-serif; cursor: pointer;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
}
.spot-button[aria-expanded='true'] { background: #d85878; }
.spot-button:focus-visible { outline: 3px solid #1f2a30; outline-offset: 2px; }
.spot-panel {
  position: absolute; width: min(240px, 50cqw - 28px); box-sizing: border-box;
  padding: 10px 12px; background: #fff; border: 2px solid #00c8e8; border-radius: 8px;
  color: #1f2a30; font-size: 14px; line-height: 1.6;
}
.spot-panel p { margin: 4px 0 0; }
.spot-panel.right { left: calc(100% + 8px); }
.spot-panel.left { right: calc(100% + 8px); }
.spot-panel.below { top: 0; }
.spot-panel.above { bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[最初] plant:false/隠れている monitor:false/隠れている mug:false/隠れている keyboard:false/隠れている
[モニターを押す] plant:false/隠れている monitor:true/見えている mug:false/隠れている keyboard:false/隠れている
[マグカップを押す] plant:false/隠れている monitor:false/隠れている mug:true/見えている keyboard:false/隠れている
[マグカップをもう一度押す] plant:false/隠れている monitor:false/隠れている mug:false/隠れている keyboard:false/隠れている
[観葉植物を開いて、説明の中を押す] plant:true/見えている monitor:false/隠れている mug:false/隠れている keyboard:false/隠れている
[画像の点のない場所を押す] plant:false/隠れている monitor:false/隠れている mug:false/隠れている keyboard:false/隠れている
[観葉植物を開いて、画像の外の文章を押す] plant:false/隠れている monitor:false/隠れている mug:false/隠れている keyboard:false/隠れている

[Tab を2回] フォーカス: monitor
[Enter] plant:false/隠れている monitor:true/見えている mug:false/隠れている keyboard:false/隠れている
[Esc] plant:false/隠れている monitor:false/隠れている mug:false/隠れている keyboard:false/隠れている / フォーカス: monitor
[Space で開いて Tab] フォーカス: mug / plant:false/隠れている monitor:true/見えている mug:false/隠れている keyboard:false/隠れている

- img "作業机のイラスト。モニター、キーボード、マグカップ、観葉植物が置いてある"
- button "観葉植物"
- button "モニター" [expanded]
- strong: モニター
- paragraph: 机の真ん中に置いた画面です。
- button "マグカップ"
- button "キーボード"

[画面の幅 760px] 画像 720×450px
  plant: 点の中心 (12.0%, 38.0%) 説明 左110.4 右350.4 上155.0 下250.2 幅240.0 → 横は画像の内側、縦は画像の内側
  monitor: 点の中心 (50.0%, 30.0%) 説明 左384.0 右624.0 上119.0 下191.8 幅240.0 → 横は画像の内側、縦は画像の内側
  mug: 点の中心 (84.0%, 68.0%) 説明 左340.8 右580.8 上226.8 下322.0 幅240.0 → 横は画像の内側、縦は画像の内側
  keyboard: 点の中心 (46.0%, 80.0%) 説明 左355.2 右595.2 上280.8 下376.0 幅240.0 → 横は画像の内側、縦は画像の内側
[画面の幅 360px] 画像 328×205px
  plant: 点の中心 (12.0%, 38.0%) 説明 左63.4 右199.4 上61.9 下179.5 幅136.0 → 横は画像の内側、縦は画像の内側
  （観葉植物を開いたときのページの幅/画面の幅 360/360）
  monitor: 点の中心 (50.0%, 30.0%) 説明 左188.0 右324.0 上45.5 下140.7 幅136.0 → 横は画像の内側、縦は画像の内側
  mug: 点の中心 (84.0%, 68.0%) 説明 左115.5 右251.5 上37.8 下155.4 幅136.0 → 横は画像の内側、縦は画像の内側
  keyboard: 点の中心 (46.0%, 80.0%) 説明 左174.9 右310.9 上40.0 下180.0 幅136.0 → 横は画像の内側、縦は画像の内側

[比較：説明の幅を 240px に固定、画面の幅 360px]
  plant: 説明 左63.4 右303.4 → 画像の内側（ページの幅/画面の幅 360/360）
  monitor: 説明 左188.0 右428.0 → はみ出す（ページの幅/画面の幅 444/360）
  mug: 説明 左11.5 右251.5 → 画像の内側（ページの幅/画面の幅 360/360）
  keyboard: 説明 左174.9 右414.9 → はみ出す（ページの幅/画面の幅 431/360）