Make an accessible tooltip using only CSS

Introduction

Tooltips are deceptively hard: hover delay, keyboard focus, and small screens all break the naive version. This build handles those edge cases and explains when to switch to the popover attribute instead.

The mental model

• Start from the smallest version that could work, and make it observable.
• Write down the trade-off you are accepting, not only the feature you are shipping.
• Revisit the decision when the team grows; most choices in CSS have a shelf life.

A practical starting point

1. Reproduce the situation on a scratch branch, next to a measurement you trust.
2. Change one variable at a time, and keep the diff small enough to explain in one sentence.
3. Keep the result, throw away the scaffolding.

git switch -c experiment/one-thing

Closing thoughts

None of this is doctrine. Treat it as a checklist you are allowed to disagree with — ideally with an experiment of your own that settles the argument.