【CSS】CSSだけでTooltipを自動で画面内に表示できるようになるらしい

はじめに

みなさんは、CSS Anchor Positioningをご存知ですか？

CSS Anchor Positioningは、まだ実験中の機能ですが、CSS Anchor Positioningを使うと、
特定の要素をAnchor（アンカー）として、tooltipなどの要素の位置を決めることができます。

この記事では、そんなCSS Anchor Positioningを紹介しようと思います。

CSS Anchor Positioningとは？

CSS Anchor Positioningは、まだ実験的な機能のため、Chrome Canaryのchrome://flagsのExperimental Web Platform featuresをEnabledにしてください。

CSS Anchor Positioningとは、特定の要素をAnchor（アンカー）として、
Anchor（アンカー）の要素を基準にtooltipなどの要素の位置を決めることができるものです。

基本的な使い方

1. HTMLを記述する

まずは、Anchorとなる要素をclass="anchor"とし、Anchorを基準として、位置を決める要素をclass="boat"とします。

wrapperとなる<div>はなくても大丈夫です。

sample.html

<div class="anchor">碇</div>
<div class="boat">ボート</div>

2. Anchorを定義する

Anchorを定義するには、anchor-nameというプロパティに --nameの形で定義します。
Anchorを定義することで、anchor()関数を使うことができるようになります。

sample.css

.anchor {
  anchor-name: --anchor;
}

また、HTMLでanchor属性を使うことでも定義することができます。
その場合は以下のように、anchor属性にAnchorにしたい要素のidを指定するだけです。

sample.html

<div id="anchor" class="anchor">碇</div>
<div anchor="anchor" class="boat">ボート</div>

3. Anchor()関数を使って要素を配置する

Anchor()関数は、3つの引数を受け取ることができます。

1. Anchor要素
   • 利用するAnchorのanchor-nameの値を指定します。
   • 省略すると、htmlのanchor属性か、anchor-defaultのプロパティが使われます。
2. 位置
   • top、right、bottom、left、centerを指定します。
   • また、%（パーセンテージ）の指定やcalc()を使って、位置を調整することもできます。
3. フォールバック
   1. オプションのフォールバック値で、長さやパーセンテージを指定します。

これらを使って、Anchorを基準に位置を決めます。

sample.css

.boat {
  position: absolute;
  bottom: calc(anchor(--anchor top) + 16px);
  left: anchor(--anchor left);
}

↑上記のサンプルだと、
.boatのbottomの位置を--anchorのtopの位置から+16pxの位置にし、
.boatのleftの位置を--anchorのleftの位置にする例です。

4. スタイルを調整して完成

あとは、デザインを整えると完成です。

See the Pen CSS Anchor Positioning - sample01 by でぐぅー | Qiita (@sp_degu) on CodePen.

※ CSS Anchor Positioningは、まだ実験的な機能のため、Chrome Canaryのchrome://flagsのExperimental Web Platform featuresをEnabledにしてご確認ください。

画面スクロールに合わせて、スクロースさせたい場合

sample.html

<div class="container">
  <div class="anchor">碇</div>
</div>
<div class="boat">ボート</div>

上記のような構造で、Anchorとなる要素がスクロールされるコンテナの中にあり、Anchorを基準として位置を決める要素がコンテナの外にある場合、スクロールに合わせてAnchorを追跡する方法が必要あります。

その場合は、以下のように、anchor-defaultプロパティとanchor-scrollプロパティを使うことで、追従することができます。

anchor-defaultプロパティを使うことで、anchor-nameで定義した子孫外の要素でも、アンカーに追従させることができます。

sample.css

.boat {
    anchor-default: --anchor;
    anchor-scroll: --anchor;
}

サンプル

See the Pen CSS Anchor Positioning - sample 02 by でぐぅー | Qiita (@sp_degu) on CodePen.

*※ CSS Anchor Positioningは、まだ実験的な機能のため、Chrome Canaryの`chrome://flags`の`Experimental Web Platform features`を`Enabled`にしてご確認ください。*

アンカーの位置に合わせて、表示する場所を変える

CSS Anchor Positioningが本領を発揮するのは、アンカーの位置に合わせて、表示させる場所を自動で決めてくれる機能を使う時です。

この機能を使うには、position-fallbackプロパティを使って、フォールバックに基づいて、要素の位置を指定します。

では、実際にやって行きましょう。

1. HTMLを記述する

Anchorを基準として位置を決める要素にpopover属性を用いることで、アンカーの近くに表示することが可能になります。

sample.html

<div class="anchor">碇</div>
<div class="boat" popover="manual">ボート</div>

popover属性については、↓こちらの記事をご覧ください。

2.Anchorを定義する

anchor-nameというプロパティを使って、Anchorを定義します。

sample.css

.anchor {
  anchor-name: --anchor;
}

3. アンカーの位置によって、表示する場所を変える

Anchorを基準として位置を決める要素に、anchor-defaultプロパティとanchor-scrollプロパティを指定し、追従するように記述します。

position-fallbackプロパティに--〇〇の形でフォールバックで使用する@position-fallbackを決めます。
そして、以下のように記述することで、アンカーの位置によって、表示する場所を変えることができるようになります。

特定のブラウザでは、popover属性にinsetの値が指定されているものがあるので、inset: unset;を指定してあげることで、うまくいくケースがあります。

sample.css

.boat {
  anchor-default: --anchor;
  anchor-scroll: --anchor;
  position-fallback: --fallback;
  inset: unset;
}

@position-fallback --fallback {
  @try {
    bottom: calc(anchor(top) + 16px);
    left: anchor(left);
  }
  @try {
    top: calc(anchor(bottom) + 16px);
    left: anchor(left);
  }
}

4.popover属性を表示させる

popover属性は、デフォルトで非表示のため、popover属性を表示させるようにJavaScriptを以下のように記載します。

sample.js

const POPS = document.querySelectorAll("[popover]");
POPS.forEach((POP) => POP.showPopover());

5.スタイルを調整して完成

あとは、デザインを整えると完成です。

See the Pen CSS Anchor Positioning - sample 03 by でぐぅー | Qiita (@sp_degu) on CodePen.

*※ CSS Anchor Positioningは、まだ実験的な機能のため、Chrome Canaryの`chrome://flags`の`Experimental Web Platform features`を`Enabled`にしてご確認ください。*

まとめ

この記事では、まだ実験中の機能CSS Anchor Positioningについて紹介しました。

CSS Anchor Positioningが実装されれば、TooltipなどのUIコンポーネントをもっと簡単に、アクセシビリティ意識した形で実装できそうです。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。