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

    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