v142 · dom

Form Field Help

Every form field has context the user might need — format rules, why a field is required, what counts as a valid value. With interestfor, each help button simply points at a popover. Hover, focus, or long-press to reveal help. Zero JS for show/hide logic.

Feature detection: checking…
Note: interestfor is not supported in this browser. Help popovers won't appear on hover — use Chrome 142+. The HTML structure below is still correct and readable.

Hover or tab to the ? button next to any label to see contextual help. No JavaScript involved in showing or hiding the popovers.

Account details
Username *
3–20 characters
Username rules
  • 3–20 characters
  • Letters, numbers, underscores, hyphens
  • Must start with a letter
  • Case-insensitive; shown as lowercase
Email address *
Why we need your email
Used for account recovery and occasional product updates. We never sell or share your address. You can unsubscribe from emails at any time.
Security
Password *
Strength: —
Password requirements
  • ✗ At least 8 characters
  • ✗ One uppercase letter
  • ✗ One number
  • ✗ One symbol (!@#$…)
Use a passphrase for best security.
Recovery phrase
Recovery phrase
A memorable sentence or set of words used to verify your identity if you lose access. Only you see this — it's stored hashed. Example: "blue bicycle Tuesday coast 7".
Profile
Display name
Display name
This is shown publicly on your profile and posts. You can use spaces, accents, and emoji. Different from your username.
Country / region
Why we ask
Used for date/time formatting, legal compliance (GDPR, CCPA), and to show locally relevant content. Not shared with third parties.

interestfor vs the alternatives

title attribute
✗ Keyboard: only on focus, not consistently
✗ Touch: no long-press support
✗ Styling: browser-native, not customisable
✗ No rich HTML content
✓ Zero JS, native attribute
JS mouseenter / focusin
✓ Full control of content and timing
✗ Requires JS event wiring
✗ Must manage show/hide state manually
✗ Touch long-press needs separate handler
✗ ARIA relationships need manual wiring
CSS :hover + absolute position
✓ No JS for mouse hover
✗ Keyboard / touch: no support
✗ Clipping: overflow:hidden on ancestors hides it
✗ Z-index stacking context issues
✗ No dismiss-on-scroll handling
interestfor (Chrome 142)
✓ Mouse hover, keyboard focus, touch long-press
✓ Browser-managed show/hide timing & delay
✓ Popover: top-layer, no clipping/stacking issues
✓ Full HTML content inside the popover
✓ Zero JS for the basic pattern 
<!-- The full pattern: label + help button + popover -->
<label for="username">
  Username
  <button interestfor="help-username"
          aria-label="Username requirements">?</button>
</label>
<input type="text" id="username">

<div popover id="help-username">
  <strong>3–20 characters.</strong>
  Letters, numbers, underscores, hyphens.
  Must start with a letter.
</div>

<!-- That's it. No JavaScript needed for show/hide. -->

see also