Keyboard key preview tooltip
A phone keyboard where each key grows upward into a balloon with a large letter when pressed or focused.
Settings
Code
<div class="uvq08-kbd"><div class="fd"><span class="tx" aria-live="polite">Hello</span><i class="cr" aria-hidden="true"></i></div><div class="kb" role="group" aria-label="Keyboard"><div class="rw"><button type="button" class="k lt" data-k="Q" tabindex="0">Q</button><button type="button" class="k lt" data-k="W" tabindex="-1">W</button><button type="button" class="k lt" data-k="E" tabindex="-1">E</button><button type="button" class="k lt" data-k="R" tabindex="-1">R</button><button type="button" class="k lt" data-k="T" tabindex="-1">T</button><button type="button" class="k lt" data-k="Y" tabindex="-1">Y</button><button type="button" class="k lt" data-k="U" tabindex="-1">U</button><button type="button" class="k lt" data-k="I" tabindex="-1">I</button><button type="button" class="k lt" data-k="O" tabindex="-1">O</button><button type="button" class="k lt" data-k="P" tabindex="-1">P</button></div><div class="rw"><button type="button" class="k lt" data-k="A" tabindex="-1">A</button><button type="button" class="k lt" data-k="S" tabindex="-1">S</button><button type="button" class="k lt" data-k="D" tabindex="-1">D</button><button type="button" class="k lt" data-k="F" tabindex="-1">F</button><button type="button" class="k lt" data-k="G" tabindex="-1">G</button><button type="button" class="k lt" data-k="H" tabindex="-1">H</button><button type="button" class="k lt" data-k="J" tabindex="-1">J</button><button type="button" class="k lt" data-k="K" tabindex="-1">K</button><button type="button" class="k lt" data-k="L" tabindex="-1">L</button><button type="button" class="k lt pk" data-k="Ñ" tabindex="-1">Ñ</button></div><div class="rw"><button type="button" class="k lt" data-k="Z" tabindex="-1">Z</button><button type="button" class="k lt" data-k="X" tabindex="-1">X</button><button type="button" class="k lt" data-k="C" tabindex="-1">C</button><button type="button" class="k lt" data-k="V" tabindex="-1">V</button><button type="button" class="k lt" data-k="B" tabindex="-1">B</button><button type="button" class="k lt" data-k="N" tabindex="-1">N</button><button type="button" class="k lt" data-k="M" tabindex="-1">M</button><button type="button" class="k bk" data-k="⌫" aria-label="Clear" tabindex="-1">⌫</button></div><div class="rw"><button type="button" class="k sp" data-k=" " tabindex="-1">space</button></div></div></div>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
See all TooltipsWhere to use it
A dark phone style keyboard with a Spanish layout, Ñ included, and a message field above it. Hover, focus or press a key and it grows upward into the familiar balloon with the letter shown large, built from two pseudo-elements so it hugs the key. Keys type into the field, arrow keys move between them and only one key sits in the tab order.
The main color sets the caret and focus ring, the second the color of the balloon. Change the rows to match another layout, or reuse the balloon on number pads, PIN entry screens and on-screen keyboards for kiosks.