グラフtooltip
棒グラフの各棒にホバー（PC）またはタップ（スマホ）でその棒の値がツールチップで表示される。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 棒グラフで正確な値を必要なときだけ見せたい場合
- PC はホバー・スマホはタップの両対応が要る画面
- ラベルを常時出すと煩雑になる密なグラフ
- 避ける場面
- 値を常に比較させたい KPI（ラベル常時表示が向く）
- ホバーできない印刷・静止画用途
- 構成要素
- 棒（フォーカス可）
- ツールチップ
- 吹き出しの三角
- 軸ラベル
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab で各棒（button）へ、Enter／Space でツールチップを固定・解除。棒の外をタップ／クリックすると閉じる
- 支援技術
棒は button で aria-label に期と値（Q1 68pt）を持ち、ツールチップは role=tooltip＋aria-describedby で関連付け。focus-visible のリングあり。reduced-motion で拡大・フェードを止め即表示
- 動き
ツールチップが 0.85 倍から 150ms で拡大・フェード。棒の色 150ms
デザインの要点
- PC はホバーで出し、タップ／クリックは固定と解除にする。タッチ端末で hover に頼ると最初のタップで開いて閉じられない
- ツールチップは棒の真上に三角付きで出す。カーソル追従にすると読んでいる間に動く
- 0.85 倍→1 倍の 150ms で出す。0 から拡大すると出所が分からず、即表示だと点滅に見える
- 棒は button にして aria-label に「Q1 68pt」を持たせる。ツールチップの文字だけでは読み上げに乗らない
コード（コピーして使えます）
<div class="ct-wrap">
<div class="ct-chart">
<div class="ct-col">
<button class="ct-bar" type="button" style="--h:68%" data-val="68pt" aria-label="Q1 68pt" aria-describedby="ct-tip-1">
<span class="ct-tip" id="ct-tip-1" role="tooltip">68pt</span>
</button>
<div class="ct-lbl">Q1</div>
</div>
<div class="ct-col">
<button class="ct-bar" type="button" style="--h:45%" data-val="45pt" aria-label="Q2 45pt" aria-describedby="ct-tip-2">
<span class="ct-tip" id="ct-tip-2" role="tooltip">45pt</span>
</button>
<div class="ct-lbl">Q2</div>
</div>
<div class="ct-col">
<button class="ct-bar" type="button" style="--h:83%" data-val="83pt" aria-label="Q3 83pt" aria-describedby="ct-tip-3">
<span class="ct-tip" id="ct-tip-3" role="tooltip">83pt</span>
</button>
<div class="ct-lbl">Q3</div>
</div>
<div class="ct-col">
<button class="ct-bar" type="button" style="--h:57%" data-val="57pt" aria-label="Q4 57pt" aria-describedby="ct-tip-4">
<span class="ct-tip" id="ct-tip-4" role="tooltip">57pt</span>
</button>
<div class="ct-lbl">Q4</div>
</div>
<div class="ct-col">
<button class="ct-bar" type="button" style="--h:92%" data-val="92pt" aria-label="Q5 92pt" aria-describedby="ct-tip-5">
<span class="ct-tip" id="ct-tip-5" role="tooltip">92pt</span>
</button>
<div class="ct-lbl">Q5</div>
</div>
</div>
</div>