CSSのAnchor Positioningでツールチップを実装する

.anchor-button {
  anchor-name: --my-button;
}

.tooltip {
  position: absolute;
  position-anchor: --my-button;
}

.tooltip {
  position: absolute;
  position-anchor: --my-button;
  position-area: top; /* アンカーの上に配置 */
}

.tooltip {
  position: absolute;
  position-anchor: --my-button;
  /* アンカーの上辺から8px上にずらす */
  bottom: calc(anchor(top) + 8px);
  /* アンカーの水平中央に合わせる */
  left: anchor(center);
  translate: -50% 0;
}

<div class="tooltip-wrapper">
  <button class="anchor-btn">ホバーしてね</button>
  <div class="tooltip" role="tooltip">これがツールチップです</div>
</div>

/* アンカーの設定 */
.anchor-btn {
  anchor-name: --tooltip-anchor;
}

/* ツールチップ */
.tooltip {
  position: absolute;
  position-anchor: --tooltip-anchor;
  position-area: top;
  width: max-content;
  margin-bottom: 8px;

  background: #333;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;

  /* 初期状態は非表示 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* ホバー or キーボードフォーカスで表示 */
.anchor-btn:hover + .tooltip,
.anchor-btn:focus-visible + .tooltip {
  opacity: 1;
}

<button class="info-btn" popovertarget="info-popover">
  ℹ️ 詳細
</button>

<div id="info-popover" popover="auto" class="popover-content">
  <p>この機能はベータ版です。</p>
  <p>フィードバックは<a href="#">こちら</a>からお願いします。</p>
</div>

/* ボタンをアンカーに */
.info-btn {
  anchor-name: --info-anchor;
}

/* ポップオーバーの配置 */
.popover-content {
  /* popoverのデフォルトinsetをリセット */
  inset: auto;
  margin: 0;

  position-anchor: --info-anchor;
  position-area: bottom;
  margin-top: 8px;

  /* スタイリング */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 300px;
}

<form class="form-example">
  <div class="form-group">
    <label for="email">メールアドレス</label>
    <input
      type="email"
      id="email"
      class="form-input"
      required
      placeholder="example@mail.com"
    />
    <span class="error-msg">有効なメールアドレスを入力してください</span>
  </div>
</form>

/* 包含ブロックの設定（absoluteの基準） */
.form-group {
  position: relative;
}

/* 入力フィールドをアンカーに */
.form-input {
  anchor-name: --email-input;
}

/* エラーメッセージの配置 */
.error-msg {
  position: absolute;
  position-anchor: --email-input;
  position-area: right;
  margin-left: 12px;

  color: #dc3545;
  font-size: 13px;
  white-space: nowrap;

  /* 初期状態は非表示 */
  display: none;
}

/* バリデーション失敗時に表示 */
.form-input:invalid:not(:placeholder-shown) + .error-msg {
  display: block;
}

/* 画面が狭いときは下に配置 */
@media (max-width: 640px) {
  .error-msg {
    position-area: bottom;
    margin-left: 0;
    margin-top: 4px;
  }
}

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top;

  /* 上にスペースがなければ下に反転 */
  position-try-fallbacks: flip-block;
}

/* 横方向の反転 */
.tooltip-horizontal {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: right;

  /* 右にスペースがなければ左に反転 */
  position-try-fallbacks: flip-inline;
}

/* 上下左右すべてを候補にする */
.tooltip-full {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top right;

  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

/* カスタムフォールバックの定義 */
@position-try --below {
  position-area: bottom;
  margin-top: 8px;
  margin-bottom: 0;
}

@position-try --left-side {
  position-area: left;
  margin-right: 8px;
  margin-bottom: 0;
}

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top;
  margin-bottom: 8px;

  /* 上 → 下 → 左 の順で試す */
  position-try-fallbacks: --below, --left-side;
}

.tooltip {
  /* flip-blockを先に試して、ダメならカスタム位置 */
  position-try-fallbacks: flip-block, --left-side;
}

/* フォールバック: Anchor Positioning非対応ブラウザ向け */
.tooltip-wrapper {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}

/* Anchor Positioningが使える場合は上書き */
@supports (anchor-name: --x) {
  .tooltip-wrapper {
    position: static;
  }

  .tooltip {
    position-anchor: --tooltip-anchor;
    position-area: top;
    bottom: auto;
    left: auto;
    transform: none;
    position-try-fallbacks: flip-block;
  }
}

<script src="https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js"></script>
<script>
  if (!CSS.supports('anchor-name: --x')) {
    window.applyAnchorPositioning();
  }
</script>