CSS アンカーの配置: JavaScript を使用しないツールチップとドロップダウン
JavaScript でツールチップを作成するということは、位置を計算するコードを記述することを意味します トリガーを基準とした要素の位置を変更し、サイズ変更とスクロール時にその位置を更新します。 ツールチップがビューポートの外に出てしまった場合のエッジケースを処理し、そのすべてを実行します レイアウトスラッシングを導入することなく。複雑ではありませんが、繰り返しのコードなので、 アプリケーションを一から再発明します。
La CSS アンカー位置決め API この問題は純粋な CSS で解決され、 宣言的な。ブラウザサポートあり2026 年初めまでに全世界で 86% (Chrome 125 以降、Edge 125 以降、Android 版 Chrome、Safari テクノロジー プレビュー)、 この技術は、最新のブラウザをサポートするサイトでの運用に適した成熟したものです。許可します 位置決めの基準点として、ある要素を別の要素に「固定」します。 十分なスペースがない場合は自動フォールバックを使用します。
何を学ぶか
- CSS アンカー配置の基本概念: アンカー、配置要素
- プロパティ
anchor-nameeposition-anchor - 機能
anchor()相対位置決め用 - 純粋な CSS でツールチップ、ドロップダウン、コンテキスト メニューを実装する方法
- 自動フォールバック
position-try-fallbacks - 完全なアクセシビリティのために Popover API と統合する方法
- サポートされていないブラウザに対する段階的な機能強化
基本的な概念
CSS アンカーの配置では、次の 2 つの役割が導入されます。
-
L'アンカー要素 (アンカー要素): アンカー先の要素。
彼はその財産を受け取ります
anchor-nameカスタム識別子の値を使用して (プレフィックス--). -
Il 配置された要素 (位置決めされた要素): 必要な要素
アンカーを基準とした位置。必須
position: absoluteoposition: fixed、受け取りますposition-anchorアンカーに接続します。
/* 1. Definisci l'ancora */
.button-trigger {
anchor-name: --tooltip-anchor;
}
/* 2. Posiziona l'elemento relativamente all'ancora */
.tooltip {
position: absolute;
/* Collega questo elemento all'ancora */
position-anchor: --tooltip-anchor;
/* Posizionamento usando la funzione anchor() */
/* anchor(bottom) = il bordo bottom dell'ancora */
top: calc(anchor(bottom) + 8px);
/* Centra orizzontalmente rispetto all'ancora */
left: anchor(center);
transform: translateX(-50%);
}アンカー()関数
機能 anchor() エッジを基準とした座標に解決されます
指定された要素アンカー。使用可能な値は次のとおりです。
anchor(top): アンカーの上端anchor(bottom): アンカーの下端anchor(left): アンカーの左端anchor(right): アンカーの右端anchor(center): アンカーの水平方向の中心anchor(middle): アンカーの垂直方向の中心anchor(self-start),anchor(self-end): テキストの方向に関連します
/* Tooltip sopra il trigger */
.tooltip-top {
position: absolute;
position-anchor: --my-anchor;
bottom: calc(anchor(top) - 8px);
left: anchor(center);
transform: translateX(-50%);
}
/* Tooltip a destra del trigger */
.tooltip-right {
position: absolute;
position-anchor: --my-anchor;
top: anchor(center);
left: calc(anchor(right) + 8px);
transform: translateY(-50%);
}
/* Dropdown sotto il trigger - allineato a sinistra */
.dropdown {
position: absolute;
position-anchor: --dropdown-anchor;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
min-width: anchor-size(width); /* larghezza minima = larghezza dell'ancora */
}anchor-size(): アンカーを基準とした寸法
機能に加えて anchor() 座標については、 anchor-size()
要素の寸法に再度アクセスできるようになります。
/* Il dropdown ha la stessa larghezza del trigger */
.dropdown {
min-width: anchor-size(width);
/* Altezza massima pari al 50% dell'altezza dell'ancora */
max-height: calc(anchor-size(height) * 0.5);
}アクセス可能なツールチップ: CSS アンカー + ポップオーバー API
2026 年にアクセスできるツールチップと CSS アンカーの配置の最適な組み合わせ ポップオーバー API を使用します。 Popover API はフォーカス管理を自動的に処理します。 外側をクリックして閉じること、および ARIA アクセシビリティ。 CSSアンカーの位置 視覚的な位置を管理します。
<!-- HTML: Popover API + Anchor Positioning -->
<button
popovertarget="tooltip-content"
class="btn-with-tooltip"
>
Hover per info
</button>
<div
id="tooltip-content"
popover="hint"
class="tooltip"
role="tooltip"
>
Informazione contestuale utile all'utente
</div>/* CSS: Anchor + Popover */
.btn-with-tooltip {
anchor-name: --btn-anchor;
}
.tooltip {
/* Stili base del tooltip */
position: absolute;
position-anchor: --btn-anchor;
/* Posiziona sotto il pulsante */
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Reset stili popover */
margin: 0;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 8px 12px;
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
font-size: 0.875rem;
max-width: 280px;
width: max-content;
/* Animazione di entrata */
opacity: 0;
transition: opacity 0.15s ease;
/* Stato visibile (Popover API) */
&:popover-open {
opacity: 1;
}
}
/* Freccia del tooltip */
.tooltip::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-bottom-color: #e2e8f0;
}
.tooltip::after {
content: '';
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-bottom-color: white;
}ドロップダウンフルメニュー
より完全な例: CSS アンカーを使用した「アクション」ボタンからのドロップダウン メニュー アクセス可能なフォーカス管理のための位置決めおよびポップオーバー API:
<!-- Bottone trigger -->
<button
class="actions-btn"
popovertarget="actions-menu"
aria-haspopup="true"
>
Azioni ▼
</button>
<!-- Menu dropdown -->
<menu
id="actions-menu"
popover="auto"
class="dropdown-menu"
>
<li><button>Modifica</button></li>
<li><button>Duplica</button></li>
<li class="separator"></li>
<li><button class="danger">Elimina</button></li>
</menu>/* CSS del dropdown */
.actions-btn {
anchor-name: --actions-anchor;
}
.dropdown-menu {
position: absolute;
position-anchor: --actions-anchor;
/* Allinea il bordo sinistro del menu con il pulsante */
top: calc(anchor(bottom) + 4px);
left: anchor(left);
/* Larghezza minima pari al pulsante */
min-width: anchor-size(width);
/* Reset stili menu */
margin: 0;
padding: 4px 0;
list-style: none;
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
/* Animazione */
opacity: 0;
scale: 0.95;
transform-origin: top left;
transition: opacity 0.15s, scale 0.15s;
&:popover-open {
opacity: 1;
scale: 1;
}
}
.dropdown-menu li button {
display: block;
width: 100%;
padding: 8px 16px;
text-align: left;
border: none;
background: none;
cursor: pointer;
font-size: 0.875rem;
&:hover {
background: #f8fafc;
}
&.danger {
color: #ef4444;
}
}
.dropdown-menu .separator {
height: 1px;
background: #e2e8f0;
margin: 4px 0;
}Position-try-fallbacks による自動フォールバック
ツールチップとドロップダウンに関する最も面倒な問題の 1 つは、次のようなケースに対処することです。 十分なスペースがありません: ツールチップがトップ ビューポートの外に出てしまう、または 左側の位置は自動的に再配置される必要があります。
CSS Anchor Positioning はこれを解決します。 position-try-fallbacks、それ
ブラウザが順番にテストする代替配置のリストを指定します。
/* Definisci i posizionamenti alternativi */
@position-try --below {
top: calc(anchor(bottom) + 8px);
bottom: auto;
left: anchor(center);
right: auto;
}
@position-try --above {
top: auto;
bottom: calc(anchor(top) + 8px);
left: anchor(center);
right: auto;
}
@position-try --right {
top: anchor(center);
left: calc(anchor(right) + 8px);
right: auto;
bottom: auto;
}
@position-try --left {
top: anchor(center);
right: calc(anchor(left) + 8px);
left: auto;
bottom: auto;
}
.tooltip {
position: absolute;
position-anchor: --my-anchor;
/* Posizionamento default: sotto */
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Fallback: prova prima sopra, poi destra, poi sinistra */
position-try-fallbacks: --above, --right, --left;
/* Fallback finale: usa la prima opzione disponibile nel viewport */
position-try-order: most-block-size;
}サポートされていないブラウザ向けのプログレッシブ機能強化
CSS アンカー配置をまだサポートしていないブラウザの場合 (Firefox 安定版)
2026 年初頭の時点ではまだサポートされていません )、使用します @supports のために
フォールバックを提供します。
/* Fallback: tooltip sempre visibile o con JS */
.tooltip {
/* Stili di default accessibili: mostro un title attribute */
display: none; /* nascosto, gestito da JS fallback */
}
/* Se il browser supporta anchor positioning: CSS puro */
@supports (anchor-name: --test) {
.trigger {
anchor-name: --my-anchor;
}
.tooltip {
display: block; /* visibile, gestito da CSS */
position: absolute;
position-anchor: --my-anchor;
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Nascosto di default, mostrato su hover/focus */
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
.trigger:hover + .tooltip,
.trigger:focus + .tooltip {
opacity: 1;
pointer-events: auto;
}
}
/* JavaScript fallback per browser legacy */
if (!CSS.supports('anchor-name', '--test')) {
// Import libreria JS per tooltip
import('./tooltip-fallback.js').then(module => module.init());
}Firefox: サポートは依然として限定的
2026 年初頭の時点で、Firefox はまだ CSS アンカーの位置をサポートしていません。
安定版 (現在開発中)。これは、20 ～ 25% が
Firefox のデスクトップ ユーザーにはフォールバックが表示されます。アメリカ合衆国 @supports のために
アンカーを配置しなくてもエクスペリエンスが常に機能するようにします。
次のステップ
純粋な CSS でツールチップと宣言型ドロップダウンが表示されるようになりました。の次の記事は、 シリーズでは、View Transitions API を検討します: スムーズなアニメーションを実装する方法 ブラウザーのネイティブ ナビゲーション (シングル ページ アプリケーションと サードパーティのライブラリを使用しないマルチページ アプリケーション。
結論
CSS Anchor Positioning は、CSS 言語への最も期待されている追加機能の 1 つです。 近年。 JavaScript コードのカテゴリ全体、つまり手動計算が不要になります。 位置決め座標の宣言型 CSS に置き換えます。 ブラウザは、自動フォールバックや更新などをネイティブに処理します。 スクロールしてサイズ変更します。
世界中のブラウザの 86% をサポートしているため、すでに拡張機能として導入できます。 進歩的で、従来のブラウザでも確実にエクスペリエンスを維持できるようにする 機能的。アクセシビリティ管理のための Popover API との組み合わせ は、2026 年の UI オーバーレイを構築するための最新の完全なスタックを表します。