Skip to content

Instantly share code, notes, and snippets.

Last active August 2, 2019 15:04
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Simple Automated Tooltips for Form Input Fields

Automated Tooltips for Form Input Fields

Tooltip auto-generated content is based on input placeholder content.

Source HTML

<input type='text' placeholder='Welcome home, World!'>

Expected/Generated HTML

<span class='tooltip-out'>
    <span class='tooltip hidden'>Welcome home, World!</span>
    <input type='text' placeholder='Welcome home, World!'>
.tooltip-out {
position: relative;
.tooltip {
background-color: rgba(255, 255, 200, 0.85);
border: 1px solid darkgreen;
border-radius: 5px;
padding: 1px 5px;
position: absolute;
left: 0;
top: -14px;
z-index: 30;
white-space: nowrap;
.hidden {
display: none;
const allInputs = document.querySelectorAll("input[type='text'], input[type='password'], input[type='email']");
Array.from(allInputs).forEach(elemInput => {
const spanOut = document.createElement('span'),
spanIn = document.createElement('span');
spanIn.classList.add('tooltip', 'hidden');
spanIn.innerText = elemInput.placeholder;
elemInput.parentNode.insertBefore(spanOut, elemInput);
spanOut.appendChild(elemInput); // Apparently this 'moves' the element (no need to detach or removeChild).
elemInput.addEventListener('focus', e => {
elemInput.addEventListener('blur', e => {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment