Tooltip

The .pl-c-tooltip wraps a trigger element and displays a tooltip body on hover or keyboard focus. Positioning uses CSS Anchor Positioning (anchor-name, position-anchor, position-area) with position-try-fallbacks for collision handling.

Semantic HTML

<span class="pl-c-tooltip" style="--pl-c-tooltip-anchor: --tip-1;">
  <span class="pl-c-tooltip__trigger">
    <button aria-describedby="tip-1">Help</button>
  </span>
  <span class="pl-c-tooltip__body" role="tooltip" id="tip-1">
    Helpful context here.
  </span>
</span>

Each tooltip instance needs a unique --pl-c-tooltip-anchor value.

Progressive enhancement

Without anchor positioning support, the tooltip body is hidden entirely (@supports not (position-anchor: --x)) to avoid misleading placement. The trigger remains fully functional via aria-describedby.

Class contract