Ship a button. Add title="Save to your cloud workspace". Done — right? Over the next seven screens you'll feel, one at a time, every place that sentence breaks. The first screen is the easiest wall and the one the most juniors walk into: the browser's built-in tooltip. It paints a bubble, and it betrays you five different ways.
Below is a live button wearing title="Save to your cloud workspace". Beside it: three device personas the real world brings to your page — a mouse cursor, a keyboard, and an iPad finger. Pick each one. Try to open the bubble. Three different failures. One attribute.
Mouse cursor
Cursor hovers ⟶ ~700ms later, a gray OS bubble slides in. Works — sort of.
VoiceOver reads: "Save, button." (mouse does not trigger screen reader)
Toggle tokens — the BUTTON restyles, the title bubble stays OS-gray. CSS can't reach the OS paint layer.
title bubble: OS paint layer. Font: 10px Arial / OS default. bg-indigo-500: no effect on bubble.
Mouse user gets a bubble, 700ms later, in 10px gray Arial. Keyboard user gets nothing — Tab-focus fires a focus event; the browser's bubble is spec-gated on pointer hover, not focus. iPad user gets nothing either — there is no hover event on touch, and long-press does not reveal title. Already two-thirds of your audience has zero tooltip from the attribute that was supposed to give one.
Now tap the style tokens above. The BUTTON restyles — your indigo fill, your soft corners, your bold type all land. The BUBBLE stays OS-gray. The UA paints that little rectangle in the operating system layer, outside every CSS selector your page could ever write. No matter how much typography work you ship, the bubble is still 10px Arial on Windows, 10px Lucida on macOS, system-dependent on Linux.
Try all three devices — switch the input, press “Try to open the bubble” in each. Then toggle at least one style token so you see which layer CSS can reach.