Anchor Positioning と Popover のツールチップ

position-try-fallbacks を使って画面からはみ出ないSample


概要
- 2026年1月13日、全モダンブラウザでAnchor Positioningが対応 - HTML・CSSだけでポップオーバー表現をしつつ、好きな要素を基準に、ポップオーバーを表示できるようになった - Popover APIを使うと、JavaScriptを使わず、ポップオーバーの表示・非表示がHTML属性だけで実現可能 - `popovertarget` 属性で開閉ボタンを指定し、 `popover` 属性で要素をポップオーバーとして宣言する - `popover` : 要素をポップオーバーとして宣言 - `popovertarget` : クリック時に開閉するポップオーバーのIDを指定 - `popovertargetaction` : 動作を指定（`toggle` / `show` / `hide`） - `popovertarget` 属性はHTML仕様上、 `button` 要素と `input[type="button"]` でのみ使用でき、 `a` 要素では動作しない - `anchor-name` で、ポップオーバーの基準となる要素を指定 - `position-anchor` で、ポップオーバーをアンカー要素と紐づける - `anchor()` 関数で、ポップオーバーの位置を指定する - `calc()` 関数と組み合わせて、余白を調整することも可能 - `anchor()` 関数の引数に入る値 - `top` : アンカーの上端 - `bottom` : アンカーの下端 - `left` : アンカーの左端 - `right` : アンカーの右端 - `center` : アンカーの中央 - `position-area` プロパティを使うと、アンカー周囲のエリアを指定して配置可能 - `block-start` : 上 - `block-end` : 下 - `inline-start` : 書字方向の開始位置（LTRなら左） - `inline-end` : 書字方向の終了位置（LTRなら右） - `block-start inline-end` : 右上 - `block-end inline-start` : 左下 - `position-try-fallbacks` を使うと、はみ出す場合に自動で代替位置へ切り替わる - `flip-block` : 上下を反転 - `flip-inline` : 左右を反転 - `flip-block flip-inline` : 両方を反転

デモ

コード

CSS

 

:root {
  --gap: 12px;      /* アンカーとツールチップの隙間 */
  --pad: 12px;      /* 画面端の余白（最大幅計算に使う） */
  --tip-max: 360px; /* ツールチップの最大幅 */
}

/* Popover は UA 既定で中央寄せ等が入るので、まずリセット */
.tip[popover] {
  inset: auto; /* ←重要：popover既定のinsetを無効化 */
  border: 0;
  margin-inline: 8px;
  padding: .9rem 1rem;
  border-radius: 14px;
  background-color: #666666ee;
  color: #eaf0ff;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  line-height: 1.45;
  max-inline-size: min(var(--tip-max), calc(100vw - (var(--pad) * 2)));
  overflow-wrap: anywhere;
}

@supports (anchor-name: --a) {
  .tip[popover] {
    position: fixed;
    bottom: anchor(top);
    justify-self: anchor-center;
    margin-bottom: var(--gap);

    /* はみ出したら上下左右を反転 */
    position-try-fallbacks: flip-block flip-inline;
  }

}

/* 非対応ブラウザ用（最低限） */
@supports not (anchor-name: --a) {
  .tip[popover] { position: fixed; top: 12px; left: 12px; }
}

/* 以下、表示調整用 */

.board {
  height: min(520px, calc(100vh - 2rem));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  position: relative;
  background: #cccccc99;
}

.anchor-btn {
  position: absolute;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: #f5f5f5;
  color: inherit;
  cursor: pointer; /* クリックで開くので pointer に */
  backdrop-filter: blur(8px);
}

.tl { top: 18px; left: 18px; }
.tr { top: 18px; right: 18px; }
.bl { bottom: 18px; left: 18px; }
.br { bottom: 18px; right: 18px; }

HTML

 
<div class="board">
  <!-- anchors (click to toggle popover) -->
  <button class="anchor-btn tl"
          style="anchor-name: --tl"
          aria-describedby="tip-tl"
          popovertarget="tip-tl">
    左上
  </button>

  <button class="anchor-btn tr"
          style="anchor-name: --tr"
          aria-describedby="tip-tr"
          popovertarget="tip-tr">
    右上
  </button>

  <button class="anchor-btn bl"
          style="anchor-name: --bl"
          aria-describedby="tip-bl"
          popovertarget="tip-bl">
    左下
  </button>

  <button class="anchor-btn br"
          style="anchor-name: --br"
          aria-describedby="tip-br"
          popovertarget="tip-br">
    右下
  </button>

  <!-- tooltips (popover) -->
  <div id="tip-tl" class="tip" popover="auto" role="tooltip" style="position-anchor: --tl">
    左上のツールチップ
  </div>

  <div id="tip-tr" class="tip" popover="auto" role="tooltip" style="position-anchor: --tr">
    右上のツールチップ
  </div>

  <div id="tip-bl" class="tip" popover="auto" role="tooltip" style="position-anchor: --bl">
    左下のツールチップ
  </div>

  <div id="tip-br" class="tip" popover="auto" role="tooltip" style="position-anchor: --br">
    右下のツールチップ
  </div>
</div>

参照