Requisitos de contraseña en vivo
Al enfocar la contraseña aparece un tooltip con la fuerza y los requisitos, que se marcan mientras escribes.
Ajustes
Código
<div class="uvq08-pwd"><label for="uvq08-pwd-i">Nueva contraseña</label><span class="fw pk"><input id="uvq08-pwd-i" type="password" autocomplete="new-password" spellcheck="false" aria-describedby="uvq08-pwd-t"><button type="button" class="ey" aria-label="Mostrar contraseña" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="o" d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle class="o" cx="12" cy="12" r="3"/><path class="x" d="M4 4l16 16"/></svg></button><span class="tt" role="tooltip" id="uvq08-pwd-t" data-l="0"><span class="mt" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="lv"><span>Empieza a escribir</span><span>Débil</span><span>Aceptable</span><span>Buena</span><span>Fuerte</span></span><span class="ru" data-r="len"><i aria-hidden="true"></i>8 caracteres o más</span><span class="ru" data-r="up"><i aria-hidden="true"></i>Una mayúscula</span><span class="ru" data-r="num"><i aria-hidden="true"></i>Un número</span><span class="ru" data-r="sym"><i aria-hidden="true"></i>Un símbolo</span></span></span></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 campo de contraseña cuyo tooltip aparece al enfocar o pasar, con un medidor de fuerza de cuatro tramos, una etiqueta de nivel y cuatro reglas de longitud, mayúscula, número y símbolo. Cada regla recibe un check animado en cuanto se cumple, y el campo queda enlazado al tooltip con aria-describedby. Un botón de ojo muestra u oculta el texto. Encaja en registros, cambios de clave y ajustes de cuenta.
El color principal marca una contraseña fuerte y las reglas cumplidas, y el secundario el nivel intermedio. Adapta las expresiones regulares del script a tu propia política y deja la lista en cuatro o cinco reglas claras.