ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning

CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示されるツールチップやコンテキストメニューを実装できます。 ポップオーバーの表示位置を調整する 冒頭の動画で使用されたコードを見てみましょう。ツールチップとして表示される要素はポップオーバー APIを使用しています。 <button popovertarget="menu">Open</button> <div popover id="menu"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a>

[jay-es]

2024 年 4 月現在 Chrome Canary でのみ利用可能。CSS プロパティ anchor-name もしくは HTML 属性 anchor を設定