ツールチップTooltip

「ツールチップ（Tooltip）」を実装してください。

## これは何か
要素に触れたり、フォーカスしたときに出る短い説明。アイコンだけのボタンの意味を補うのによく使う。

## 使いどころ
- アイコンボタンの意味を、場所を取らずに補いたいとき
- 表の見出しの略語に、正式名称を添えたいとき

## 実装の要件
- 対象[aria-describedby] + role="tooltip" の要素。吹き出しの文がボタンの名前そのもの（「並び替え」など）なら、aria-label を付けずに aria-labelledby で吹き出しを指す（describedby だと同じ文が2回読まれる）
- hover と focus-visible の両方で表示する
- @supports (anchor-scope: all) の中で、部品1つ分の外枠に anchor-scope: --tip、対象に anchor-name: --tip を付ける（Chrome・Edge は 131 から、Safari は 26 から、Firefox は 147 から）。@supports の外には、上へ出す absolute の配置と矢印を残す
- 同じ @supports の中で吹き出しを position: fixed; inset: auto; transform: none; position-anchor: --tip; position-area: block-start span-inline-end; にし、対象の上に左端をそろえて出す
- 同じ @supports の中で吹き出しに position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; を付け、画面の端での反転をブラウザに任せる。矢印（::after）は反転に付いてこないので、この中では出さない
- 出ていない間の吹き出しは display: none にする。opacity: 0 だけだと見えない吹き出しがクリックを奪い、visibility: hidden でも狭い画面では横スクロールを生む
- ここにしか書いていない情報を入れない。タッチ環境では出せないことがある
- 長い文章を入れない。1行に収まらないならポップオーバーにする
- title 属性だけに頼らない。出るまでが遅く、拡大表示では読めない
- 画面の端では吹き出しが見切れる。反転はアンカー配置の position-try-fallbacks に任せる。対応しないブラウザでは上の中央に出したままで、端では見切れる

## アクセシビリティの要件
- ホバーだけでなくフォーカスでも出す。キーボード利用者に届かない
- 説明の要素に id を付け、対象から aria-describedby で結ぶ
- Esc キーで消せるようにする
- 吹き出しの上にマウスを乗せても消えないようにする（読み切る前に消えない）

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<!-- x-tooltip--shown は見本用。実際は触れたときだけ出すので、この修飾子は付けない -->
<span class="x-tooltip x-tooltip--shown">
  <button class="x-tooltip__b" type="button" aria-label="並び替え" aria-describedby="x-tooltip-t">
    <i class="fa-solid fa-arrow-down-short-wide" aria-hidden="true"></i>
  </button>
  <span class="x-tooltip__t" id="x-tooltip-t" role="tooltip">新しい順に並べ替えます</span>
</span>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-tooltip,
.x-tooltip *:not([class*="fa-"]),
.x-tooltip *:not([class*="fa-"])::before,
.x-tooltip *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-tooltip {
  position: relative;
  display: inline-block;
  /* 見本の枠の中に吹き出しを収めるための余白。実際は外し、吹き出しを top: auto; bottom: calc(100% + 4px); で
     対象の上に出す（4px は矢印の高さ） */
  padding-top: 30px;
}
.x-tooltip__b {
  width: 40px;
  height: 40px;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  cursor: pointer;
}
.x-tooltip__t {
  position: absolute;
  /* 出ていない間は display: none。透明にするだけだと、見えない吹き出しがクリックを奪い、狭い画面では横スクロールを生む */
  display: none;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 6px;
  background: #1b2028;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
}
/* 実際は触れたときだけ出す。--shown は「出ている状態」を見せるための見本用 */
.x-tooltip:hover .x-tooltip__t,
.x-tooltip__b:focus-visible + .x-tooltip__t,
.x-tooltip--shown .x-tooltip__t {
  display: block;
}
.x-tooltip__t::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border: 4px solid transparent;
  border-top-color: #1b2028;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。