CSS Anchor Positioning サンプル

ボタンにマウスを乗せると、上にツールチップが表示されます。position-area: top で配置し、position-try-fallbacks: flip-block で上にスペースがなければ下に反転します。

position-area の値を変えるだけで、上下左右に配置できます。

HTMLの popover 属性と組み合わせることで、JSなしで開閉するポップオーバーが作れます。外側をクリックするかEscキーで閉じます。

popover属性はトップレイヤーに配置されるため、z-indexの問題を気にする必要がありません。

入力フィールドをアンカーにして、バリデーションエラー時にメッセージを表示します。不正な値を入力してみてください。

:invalid:not(:placeholder-shown) を使って、ユーザーが入力してからエラーを表示しています。初期状態では非表示です。