How do I create a tooltip in CSS without JavaScript?

Use a data attribute on the trigger element and the ::after pseudo-element to display the tooltip text. Show it on :hover with opacity or visibility transitions.

How do I add an arrow to a CSS tooltip?

Use the ::before pseudo-element with transparent borders on three sides and a colored border on the side facing the tooltip body. This creates a CSS triangle that serves as the arrow.

Are CSS tooltips accessible?

CSS-only tooltips work on hover but not keyboard navigation by default. Add tabindex='0' and :focus-visible styles to the trigger element, and use aria-describedby for screen reader support.

How to Build a CSS Tooltip (No JavaScript)

💬

Try CSS Tooltip Generator

Free, no signup →