≪ Today I learned. RSS購読
公開日
更新日
タグ
HTML, CSS
著者
ダーシノ(@bc_rikko)

Popover API + CSS Anchor Positioningでツールチップを表示する

Popover API + CSS Anchor Positioningでツールチップを表示する。

<form>
  <div>
    <label for="account">アカウント</label>
    <button
      type="button"
      id="anchor-account"
      popovertarget="tooltip-account"
      aria-label="アカウントの説明を表示する"
    >(?)</button>
    <p
      class="tooltip"
      id="tooltip-account"
      anchor="anchor-account"
      popover
    >← アカウントはあれが、それで、こうなる</p>
    <input id="account" type="text">
  </div>
  ...
</form>

<style>
.tooltip {
  /* 勝手にmarginがとられてしまうので無効にする */
  margin: 0;
  /* anchorに対してどの位置にtooltipを表示するか指定する。この他に top: anchor(center) のような指定の仕方もある。 */
  position-area: top;
  border: 2px solid;
}
</style>

デモ

アカウントはあれが、それで、こうなる

名前はあれが、それで、こうなる

追記: 2024-09-20