Building Tooltips on the Web

Building tooltips that work for everyone — CSS-only hints, positioning and placement, and the accessibility rules for content shown on hover or focus.

Content tagged tooltips

• Tutorial:CSS-Only Tooltips with attr() and content

  Styled, keyboard-friendly tooltips from one HTML attribute — no JavaScript.

  Build CSS-only tooltips that read their text from an HTML attribute with content: attr() — positioned with a ::after pseudo-element, given an arrow, revealed on hover and keyboard focus, flipped below the element and kept gentle under reduced motion — plus the accessibility limits and pitfalls to know before shipping one.