HTML + CSSTooltips

Delayed blur tooltip

A tooltip that waits half a second before fading in from a blur, and disappears quickly when you leave.

Settings

16px
1x

Code

<button class="uv-tb">Save<span>Shortcut: ⌘ + S</span></button>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Tooltips

Where to use it

The short delay is what makes this tooltip pleasant in busy interfaces. It suits keyboard shortcut hints in a web app (“Shortcut: ⌘ + S” under a Save button), the toolbar of a design tool or the formatting buttons of a text editor. Nothing flashes when the mouse just passes by; linger and the label sharpens out of a blur.

It is aimed at people who already know the tool and want a reminder. Beginners may not wait long enough to see it, so don't hide essential instructions there. It hides faster than it appears, which keeps the interface feeling responsive.