ツールチップの位置をCSSだけで制御できるようになった。2024年から使える機能。
今までは、popper.js、floating UIを使ってやるものだった。
見切れてしまう対策として、フォールバック位置も宣言的に指定できる。（position-try-fallbacks）
めんどくさい、計算がCSSだけでできるようになった。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.button { anchor-name: --save-btn; } .tooltip { position: absolute; position-anchor: --save-btn; top: anchor(bottom); left: anchor(left); margin-top: 8px; padding: 8px 12px; background: black; color: white; border-radius: 4px; } |
これならボタンの下にツールチップが表示される。
Popover API（ポップオーバーAPI）
2023年から使えるようになった開閉のためのAPI。2024年に色んなブラウザで使えるようになってきた。
この記事へのコメントはありません。