方向別ツールチップ

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「方向別ツールチップ」の効果を追加してください。

# 追加してほしい効果
方向別ツールチップ（ツールチップ & メニュー）
ボタンの上下左右に矢印付きの吹き出しが現れるCSSツールチップ集。hoverとfocusどちらでも表示され、待機中は1つが自動でそっとプレビューされます。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 方向別ツールチップ: 上下左右4方向+矢印付きのCSS実装。hoverまたはfocusで表示し、待機中は1つを自動でそっとプレビュー -->
<section class="td-stage" aria-label="方向別ツールチップの見本">
  <p class="td-eyebrow">TOOLTIP · 4 DIRECTIONS</p>
  <h2 class="td-title">方向別ツールチップ</h2>
  <p class="td-lead">ボタンにカーソルを合わせる、または <kbd>Tab</kbd> で移動すると上下左右にヒントが現れます。</p>

  <div class="td-grid">
    <div class="td-pin td-pin--top">
      <button type="button" class="td-btn" aria-describedby="td-tip-top">上 Top</button>
      <div class="td-tip td-tip--top" id="td-tip-top" role="tooltip">保存前に内容をご確認ください</div>
    </div>

    <div class="td-pin td-pin--left">
      <button type="button" class="td-btn" aria-describedby="td-tip-left">左 Left</button>
      <div class="td-tip td-tip--left" id="td-tip-left" role="tooltip">直近3件の履歴から復元できます</div>
    </div>

    <div class="td-medallion" aria-hidden="true"><span>見</span></div>

    <div class="td-pin td-pin--right">
      <button type="button" class="td-btn" aria-describedby="td-tip-right">右 Right</button>
      <div class="td-tip td-tip--right" id="td-tip-right" role="tooltip">同期は3分前に完了しました</div>
    </div>

    <div class="td-pin td-pin--bottom">
      <button type="button" class="td-btn" aria-describedby="td-tip-bottom">下 Bottom</button>
      <div class="td-tip td-tip--bottom" id="td-tip-bottom" role="tooltip">下書きは自動的に保存されます</div>
    </div>
  </div>
</section>

【CSS】
/* 方向別ツールチップ: 生成り(ivory)の背景+黒檀のバブル。矢印はボーダートリック、表示はCSSのhover/focus-visibleで完結 */
:root{
  --bg-1:#f7f1e6;
  --bg-2:#ecdfc6;
  --surface:#fffdf9;
  --line:#e6dac2;
  --ink:#2a2420;
  --muted:#8b7d6a;
  --gold:#a9803f;
  --gold-soft:#caa25f;
  --tip-bg:#211b15;
  --tip-ink:#f6efe1;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:44px 20px;
  overflow-x:hidden;
  overflow-y:auto;
  font-family:"Segoe UI",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(560px 300px at 12% 0%,#fffaf0 0%,transparent 60%),
    radial-gradient(520px 280px at 100% 100%,#f2e2c4 0%,transparent 55%),
    linear-gradient(180deg,var(--bg-1),var(--bg-2));
}

.td-stage{
  width:min(460px,100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 26px 60px -30px rgba(60,42,10,.35),0 2px 10px rgba(60,42,10,.06);
  padding:34px 30px 30px;
  text-align:center;
}
.td-eyebrow{
  margin:0 0 6px;
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--gold);
  font-weight:700;
}
.td-title{
  margin:0 0 10px;
  font-size:1.32rem;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.01em;
}
.td-lead{
  margin:0;
  font-size:.86rem;
  line-height:1.6;
  color:var(--muted);
}
.td-lead kbd{
  font-family:inherit;font-size:.78em;padding:1px 6px;border-radius:5px;
  background:#f1e9d8;border:1px solid var(--line);color:var(--ink);
}

.td-grid{
  margin-top:30px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-areas:
    ".    top    ."
    "left mid  right"
    ".    bottom .";
  gap:22px 10px;
  place-items:center;
}
.td-pin{position:relative;display:inline-flex}
.td-pin--top{grid-area:top}
.td-pin--right{grid-area:right}
.td-pin--bottom{grid-area:bottom}
.td-pin--left{grid-area:left}

.td-medallion{
  grid-area:mid;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#2f2419,var(--tip-bg));
  border:1px solid rgba(201,162,92,.4);
  color:var(--gold-soft);
  font-family:Georgia,"Yu Mincho",serif;
  font-size:1.15rem;
  box-shadow:0 14px 30px -14px rgba(30,20,5,.6), inset 0 0 0 1px rgba(255,255,255,.03);
  animation:td-breathe 4.2s ease-in-out infinite;
}
@keyframes td-breathe{
  0%,100%{transform:scale(1);opacity:.92}
  50%{transform:scale(1.05);opacity:1}
}

.td-btn{
  font:inherit;font-weight:600;font-size:.84rem;
  color:var(--ink);
  background:#fbf6ec;
  border:1px solid var(--line);
  border-radius:11px;
  padding:11px 16px;
  cursor:pointer;
  transition:border-color .2s ease,transform .15s ease,box-shadow .2s ease;
  min-width:84px;
}
.td-btn:hover{border-color:var(--gold-soft);box-shadow:0 8px 18px -12px rgba(120,90,30,.5)}
.td-btn:active{transform:translateY(1px)}
.td-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.td-tip{
  position:absolute;
  z-index:30;
  width:max-content;
  max-width:190px;
  padding:9px 13px;
  font-size:.76rem;
  line-height:1.55;
  text-align:left;
  color:var(--tip-ink);
  background:var(--tip-bg);
  border:1px solid rgba(201,162,92,.3);
  border-radius:9px;
  box-shadow:0 22px 46px -20px rgba(20,14,4,.6);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.td-tip::before{content:"";position:absolute;border:6px solid transparent}

.td-tip--top{left:50%;bottom:calc(100% + 13px);transform:translate(-50%,5px)}
.td-tip--top::before{left:50%;bottom:-6px;transform:translateX(-50%);border-top-color:var(--tip-bg)}
.td-tip--bottom{left:50%;top:calc(100% + 13px);transform:translate(-50%,-5px)}
.td-tip--bottom::before{left:50%;top:-6px;transform:translateX(-50%);border-bottom-color:var(--tip-bg)}
.td-tip--left{right:calc(100% + 13px);top:50%;transform:translate(5px,-50%)}
.td-tip--left::before{right:-6px;top:50%;transform:translateY(-50%);border-left-color:var(--tip-bg)}
.td-tip--right{left:calc(100% + 13px);top:50%;transform:translate(-5px,-50%)}
.td-tip--right::before{left:-6px;top:50%;transform:translateY(-50%);border-right-color:var(--tip-bg)}

/* 表示トリガー: hover / focus-visible / 自動プレビュー(is-auto) / タッチ(is-shown) */
.td-pin:hover .td-tip,
.td-btn:focus-visible + .td-tip,
.td-pin.is-auto .td-tip,
.td-pin.is-shown .td-tip{opacity:1}
.td-pin:hover .td-tip--top, .td-btn:focus-visible + .td-tip--top, .td-pin.is-auto .td-tip--top, .td-pin.is-shown .td-tip--top{transform:translate(-50%,0)}
.td-pin:hover .td-tip--bottom, .td-btn:focus-visible + .td-tip--bottom, .td-pin.is-auto .td-tip--bottom, .td-pin.is-shown .td-tip--bottom{transform:translate(-50%,0)}
.td-pin:hover .td-tip--left, .td-btn:focus-visible + .td-tip--left, .td-pin.is-auto .td-tip--left, .td-pin.is-shown .td-tip--left{transform:translate(0,-50%)}
.td-pin:hover .td-tip--right, .td-btn:focus-visible + .td-tip--right, .td-pin.is-auto .td-tip--right, .td-pin.is-shown .td-tip--right{transform:translate(0,-50%)}

@media (max-width:420px){
  .td-grid{grid-template-columns:1fr;grid-template-areas:"top" "left" "mid" "right" "bottom";gap:14px}
  .td-medallion{margin:4px 0}
  /* 横幅が狭い時は左右のバブルも下に出して画面端の見切れを防ぐ */
  .td-tip--left,.td-tip--right{
    left:50%;right:auto;top:calc(100% + 13px);bottom:auto;
    transform:translate(-50%,-5px);
  }
  .td-tip--left::before,.td-tip--right::before{
    left:50%;right:auto;top:-6px;bottom:auto;
    transform:translateX(-50%);
    border-left-color:transparent;border-right-color:transparent;
    border-bottom-color:var(--tip-bg);
  }
  .td-pin:hover .td-tip--left, .td-btn:focus-visible + .td-tip--left, .td-pin.is-auto .td-tip--left, .td-pin.is-shown .td-tip--left,
  .td-pin:hover .td-tip--right, .td-btn:focus-visible + .td-tip--right, .td-pin.is-auto .td-tip--right, .td-pin.is-shown .td-tip--right{
    transform:translate(-50%,0);
  }
}
@media (prefers-reduced-motion:reduce){
  .td-medallion{animation:none}
  .td-tip{transition:opacity .15s ease}
}

【JavaScript】
// 方向別ツールチップ: 表示自体はCSSのhover/focus-visibleで完結。
// JSは (1) タッチ端末でのタップ表示 (2) 誰も操作していない間に1つだけそっと自動プレビューする
// 「生きて見える」演出、の2つだけを担当する。
(() => {
  const stage = document.querySelector('.td-stage');
  if (!stage) return; // null安全

  const pins = Array.from(stage.querySelectorAll('.td-pin'));
  if (!pins.length) return;

  // --- タッチ: hoverが無い端末向けにタップで表示/非表示をトグル ---
  pins.forEach((pin) => {
    const btn = pin.querySelector('.td-btn');
    if (!btn) return;
    btn.addEventListener('touchstart', (e) => {
      e.preventDefault();
      const willOpen = !pin.classList.contains('is-shown');
      pins.forEach((p) => p.classList.remove('is-shown'));
      if (willOpen) pin.classList.add('is-shown');
    }, { passive: false });
  });
  document.addEventListener('touchstart', (e) => {
    if (!e.target.closest('.td-pin')) pins.forEach((p) => p.classList.remove('is-shown'));
  }, { passive: true });

  // --- 待機時オートプレビュー ---
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) return; // モーション抑制時は自動演出をしない

  let idleTimer = null;
  let cycle = 0;
  let activePin = null;

  const clearActive = () => {
    if (activePin) { activePin.classList.remove('is-auto'); activePin = null; }
  };

  const previewNext = () => {
    clearActive();
    activePin = pins[cycle % pins.length];
    cycle += 1;
    activePin.classList.add('is-auto');
    window.setTimeout(() => {
      clearActive();
      scheduleIdle();
    }, 2100);
  };

  const scheduleIdle = () => {
    window.clearTimeout(idleTimer);
    idleTimer = window.setTimeout(previewNext, 2600);
  };

  const onActivity = () => {
    window.clearTimeout(idleTimer);
    clearActive();
    scheduleIdle();
  };

  stage.addEventListener('pointerenter', onActivity, true);
  stage.addEventListener('focusin', onActivity);

  scheduleIdle();
})();

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。