Live password requirements tooltip
Focusing the password field opens a tooltip with a strength meter and rules that tick off as you type.
Settings
Code
<div class="uvq08-pwd"><label for="uvq08-pwd-i">New password</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="Show password" 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="or" 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="or" 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>Start typing</span><span>Weak</span><span>Fair</span><span>Good</span><span>Strong</span></span><span class="ru" data-r="len"><i aria-hidden="true"></i>8 characters or more</span><span class="ru" data-r="up"><i aria-hidden="true"></i>One uppercase letter</span><span class="ru" data-r="num"><i aria-hidden="true"></i>One number</span><span class="ru" data-r="sym"><i aria-hidden="true"></i>One symbol</span></span></span></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 password field whose tooltip appears on focus or hover with a four step strength meter, a level label and four rules for length, uppercase, number and symbol. Each rule gets an animated check as soon as it is met, and the field is linked to the tooltip with aria-describedby. An eye button shows or hides the text. It fits sign up, reset and account settings.
The main color marks a strong password and checked rules, the second the middle level. Adapt the regular expressions in the script to your own policy and keep the list to four or five clear rules.