Pure-CSS tooltips driven by a data-tooltip attribute and the ::before / ::after pseudo-elements. No JavaScript, no popper, no positioning library. Tune the position, arrow, padding, and easing; hover the preview button to see exactly what shipping the CSS will look like.
Any element with a data-tooltip attribute becomes a host. CSS reads the attribute through content: attr(data-tooltip) on a ::before pseudo-element. The arrow is a CSS triangle made with border on a second pseudo-element. Both are hidden by default with opacity: 0 and pointer-events: none, then revealed on :hover and :focus-visible.
Accessibility notes: this pattern is decorative — it won't be announced by screen readers, so any information conveyed should also be available via aria-label or visible text. The :focus-visible selector makes the tooltip keyboard-accessible.