Teclado con vista previa de tecla
Un teclado de móvil en el que cada tecla crece hacia arriba en un globo con la letra grande al pulsarla o enfocarla.
Ajustes
Código
<div class="uvq08-kbd"><div class="fd"><span class="tx" aria-live="polite">Hola</span><i class="cr" aria-hidden="true"></i></div><div class="kb" role="group" aria-label="Teclado"><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="Borrar" tabindex="-1">⌫</button></div><div class="rw"><button type="button" class="k sp" data-k=" " tabindex="-1">espacio</button></div></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Tooltips
Ver todos: TooltipsDónde usarlo
Un teclado oscuro de estilo móvil con distribución española, Ñ incluida, y un campo de mensaje encima. Pasa, enfoca o pulsa una tecla y crece hacia arriba en el globo de siempre con la letra en grande, hecho con dos pseudoelementos para que abrace la tecla. Las teclas escriben en el campo, las flechas se mueven entre ellas y solo una tecla queda en el orden de tabulación.
El color principal define el cursor y el anillo de foco, y el secundario el color del globo. Cambia las filas para otra distribución o reutiliza el globo en teclados numéricos, pantallas de PIN y teclados en pantalla para quioscos.