Show Form Fields Hint On Focus With Stylish CSS

What interface element should you use to provide the user with helpful information about a form field as a hint? If you were thinking of a tooltip, you are correct. Tooltips are necessary for form fields that need more clarification than its field label can give.

For example, when the field label has an obscure term the user isn’t familiar with. Or, when you’re asking for information that’s more personal than normal and need to explain why it’s needed. By default, the title attribute is easy to display because the user has a mouse hover and ample screen space. This allows the user to trigger and read the tooltip with ease.

But on mobile and when a user forgets to hover, it’s more of a challenge because screen space is limited and there is no mouse hover. This begs the question of what the best way to display tooltips on a mobile form is. So here we have a fully customizable and controllable hint tooltip that you can adjust as per your template.

Features:

1. Pure JavaScript Multi-Tab.
2. Anchor Tag URL Enabled.
3. Can Access Directly On Any Tab From URL Anchor Tag.
4. Fully Customizable.
5. Full Height View And Hash URL Reader For Anchor Tag.
6. Your code will be lightweight because it will have zero dependencies.
7. Your website will perform better. You won’t need to load external scripts and stylesheets.
8. You’ll have more control. You will have built the clock to behave exactly the way you want it to (rather than trying to bend a plugin to your will).

How To Show Form Fields Hint On Focus With Stylish CSS?

There are few easy and understandable steps to achieve your desired functionality using pure Vanilla JavaScript that we are gonna share below. Follow each step perfectly.

HTML:

<input name="email" id="email" type="text" />
<span class="hint">This is your regular e-mail address.<span class="hint-pointer"> </span></span>

<select id="year" name="year">
<option value="">Year</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
</select>
<span class="hint">This is your birth year.<span class="hint-pointer"> </span></span>

CSS:

<style type="text/css">
.hint {
display: none;
position: absolute;
right: -250px;
width: 200px;
margin-top: -4px;
border: 1px solid #c93;
padding: 10px 12px;
background-color: #ffc;
}
.hint .hint-pointer {
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 19px;
background: url(_images/pointer.gif) left top no-repeat;
}
</style>

JavaScript:

<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
// test to see if the hint span exists first
if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
// repeat the same tests as above for selects
var selects = document.getElementsByTagName("select");
for (var k=0; k<selects.length; k++) {
if (selects[k].parentNode.getElementsByTagName("span")[0]) {
selects[k].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
selects[k].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
}
addLoadEvent(prepareInputsForHints);
</script>

Customization:

Just download the image pointer.gif and save it in your folder and edit background: url(_images/pointer.gif) left top no-repeat; CSS part. Rest is easy to copy paste. Want to customize more, contact us.

Troubleshooting the Errors

Do it with concentration and patience. Check your alls steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us or If you have any doubts and problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy development, See you in the next article.