Form Field Help
Small ? circles next to form labels that reveal a one-line hint on hover — username rules, email visibility, time-zone purpose. The tooltip pops to the right with a side-arrow tail so the form line stays uninterrupted. For settings panels, sign-up forms, profile editors.
Form Field Help the 21st of 21 designs in the 21 CSS Tooltips collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="fhelp-stage">
<div class="fhelp-form">
<div class="fhelp-field">
<div class="fhelp-label">
Username
<span class="fhelp-t">
<span class="fhelp-icon">?</span>
<span class="fhelp-tip">Letters, numbers, and underscores only. 3–20 characters.</span>
</span>
</div>
<input class="fhelp-input" type="text" value="kalani_a" readonly>
</div>
<div class="fhelp-field">
<div class="fhelp-label">
Email address
<span class="fhelp-t">
<span class="fhelp-icon">?</span>
<span class="fhelp-tip">Used for login and account recovery. Never shown publicly.</span>
</span>
</div>
<input class="fhelp-input" type="email" value="[email protected]" readonly>
</div>
<div class="fhelp-field">
<div class="fhelp-label">
Website
<span class="fhelp-t">
<span class="fhelp-icon">?</span>
<span class="fhelp-tip">Include https:// — displayed on your public profile page.</span>
</span>
</div>
<input class="fhelp-input" type="text" value="https://kalani.dev" readonly>
</div>
<div class="fhelp-field">
<div class="fhelp-label">
Bio
<span class="fhelp-t">
<span class="fhelp-icon">?</span>
<span class="fhelp-tip">Shown below your name on your profile. Max 160 characters.</span>
</span>
</div>
<input class="fhelp-input" type="text" value="Building things on the web. Based in Honolulu." readonly>
</div>
<div class="fhelp-field fhelp-field-last">
<div class="fhelp-label">
Time zone
<span class="fhelp-t">
<span class="fhelp-icon">?</span>
<span class="fhelp-tip">Used to display timestamps and schedule notifications correctly.</span>
</span>
</div>
<input class="fhelp-input" type="text" value="Pacific/Honolulu (UTC −10:00)" readonly>
</div>
</div>
</div> .fhelp-stage {
background: #fff;
/* Right room — help tooltips pop to the RIGHT of each ? icon,
~280px wide single-line pills. Padding the right side gives them
room to extend without getting clipped by the gallery card. */
padding: 40px 320px 40px 28px;
font-family: system-ui, -apple-system, sans-serif;
}
.fhelp-form {
max-width: 400px;
margin: 0 auto;
}
.fhelp-field {
margin-bottom: 18px;
}
.fhelp-field-last {
margin-bottom: 0;
}
.fhelp-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
font-weight: 500;
color: #111;
margin-bottom: 6px;
}
.fhelp-t {
position: relative;
display: inline-flex;
align-items: center;
}
.fhelp-icon {
width: 15px;
height: 15px;
border-radius: 50%;
background: #e5e7eb;
color: #9ca3af;
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
transition: background .12s, color .12s;
flex-shrink: 0;
line-height: 1;
}
.fhelp-t:hover .fhelp-icon {
background: #d1d5db;
color: #374151;
}
.fhelp-tip {
position: absolute;
top: 50%;
left: calc(100% + 8px);
transform: translateY(-50%) translateX(4px);
background: #18181b;
color: #fff;
font-size: 11.5px;
padding: 7px 11px;
border-radius: 5px;
width: 240px;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition:
opacity .14s,
transform .14s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .14s;
z-index: 100;
line-height: 1.4;
display: block;
}
.fhelp-t:hover .fhelp-tip {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
transition-delay: 0s;
}
.fhelp-tip::after {
content: '';
position: absolute;
top: 50%;
right: 100%;
transform: translateY(-50%);
border: 4px solid transparent;
border-right-color: #18181b;
}
.fhelp-input {
width: 100%;
padding: 8px 11px;
border: 1px solid #e5e7eb;
border-radius: 6px;
font-size: 12.5px;
color: #374151;
background: #fafafa;
outline: none;
font-family: inherit;
}
.fhelp-input:focus {
border-color: #6366f1;
background: #fff;
}