GifproGifpro

アンカーに吸い付く!CSSで作る追従ツールチップ

代码预览

エディタを読み込み中…
P

提示词

Create a demo of CSS anchor positioning: a tooltip that follows an anchor element. Use a button as anchor, and a div positioned with anchor() and position-area/position-try. The tooltip should adjust if close to edges.

CSS Anchor Positioningを使うと、要素を別の要素(アンカー)に固定できます。position-anchorでアンカーを指定し、position-areaで配置位置を決めます。position-try-optionsプロパティで、ビューポートからはみ出す場合の代替位置を定義可能。このデモではツールチップがボタンに寄り添い、スペース不足で反対側に反転します。

这个提示对您有帮助吗?

评论

评论将在审核后显示

この記事が役に立ったら投げ銭で応援

Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済

開発者が選ぶ最強ツール集

運営者が毎日使っているツール・ガジェット 6選

見る
首页ヘルプ