CVC Info Tooltip – Frontend Snippet

Go back

<label class="ot32"><span class="lb">CVC</span><span class="f"><input type="text" inputmode="numeric" maxlength="4" placeholder="•••" autocomplete="cc-csc"><button type="button" aria-label="Where is the CVC?">i</button><span class="tip" role="tooltip"><svg viewBox="0 0 80 50" aria-hidden="true"><rect x="1" y="1" width="78" height="48" rx="5"/><rect class="st" x="1" y="9" width="78" height="9"/><rect class="sg" x="8" y="25" width="44" height="8" rx="1"/><rect class="cv" x="55" y="23" width="18" height="12" rx="2"/></svg>3 digits on the back</span></span></label>