New native tooltip in CSS

Native tooltip implementation using the new Popover API and the CSS anchor positioning features.

<button style="anchor-name: --anchor" popovertarget="tooltip" >
  <p aria-hidden="true"> ? </p> 
</button>
 
<div 
  id="tooltip" 
  class="tooltip" 
  style="position-anchor: --anchor"
  popover
>
  <p>El contenido del tooltip</p>
</div>
.tooltip { inset-area: bottom;} /* Position tooltip below the anchor */
  • No JavaScript required
  • Anchored positioning (position-anchor)
  • Native popover behavior with popover attribute
  • A11y-friendly with aria-hidden
See all notes