HTML + CSSTooltips
Typewriter tooltip
A question mark that answers back: the hint types itself out letter by letter when you hover it.
Settings
16px
1x
Code
<button class="uv-ttype">?<span><b>Quick tip</b></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 little “?” next to a form field is where this one shines. In an insurance quote form, hover it beside “Excess amount” and a short explanation types itself out, as if someone were answering you. It is a typewriter tooltip made with HTML and CSS, and it also opens with keyboard focus.
The effect is meant for one short line. Past five or six words the typing feels slow and the tooltip gets too wide, so keep longer explanations for a help panel. If you change the text a lot, adjust the typing speed to match.