2021 June 07 Archive - EXEIdeas – Let's Your Mind Rock

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.CLICK HERE TO SEE DEMOFeatures:Pure JavaScript Multi-Tab.Anchor Tag URL Enabled.Can Access Directly On Any Tab From URL Anchor Tag.Fully Customizable.Full Height View And Hash URL Reader For Anchor Tag.Your code will be lightweight because it will have zero dependencies.Your website will perform better. You won’t need to load external scripts and stylesheets.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: This is your regular e-mail address. Year 2007 2006 2005 2004 2003 This is your birth year. 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;} 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 firstif (inputs[i].parentNode.getElementsByTagName("span")[0]) {// the span exists! on focus, show the hintinputs[i].onfocus = function () {this.parentNode.getElementsByTagName("span")[0].style.display = "inline";}// when the cursor moves away from the field, hide the hintinputs[i].onblur = function () {this.parentNode.getElementsByTagName("span")[0].style.display = "none";}}}// repeat the same tests as above for selectsvar selects = document.getElementsByTagName("select");for (var k=0; k 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 ErrorsDo 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.