PDA

View Full Version : Hints outside Textbox



erik216
02-27-2015, 04:48 AM
I want to make a hint when user clicked in textbox. The hint message will display outside the textbox.
Where can I find related script?
Or could anyone can help me?

Beverleyh
02-27-2015, 08:23 AM
You can do this easily with just CSS;

.tip { display:inline-block; position:fixed; z-index:999; padding:0.5em 1em; width:10em; background:yellow; border:1px solid black; opacity:0 }
.text:focus + .tip { -webkit-animation:fadeIn 1s both; animation:fadeIn 1s both }
@-webkit-keyframes fadeIn {
0% { opacity:0 }
100% { opacity:1 }
}
@keyframes fadeIn {
0% { opacity:0 }
100% { opacity:1 }
}

First name: <input type="text" class="text" name="fname"><div class="tip">Please enter your first name here.</div><br/>
Last name: <input type="text" class="text" name="lname"><div class="tip">Please enter your last name here.</div>This will work in IE9+ and modern browsers.

If you need IE8 support, just use a conditional stylesheet to set .tip as display:none; in it's default state, changing to display:inline-block; on focus.

erik216
02-28-2015, 04:03 AM
Thanks for your reply

I have been tried the above code run at PC which is fine.
But when I try to run at android web browser. It will occur a problem
5600
The display message is not close

How can I fixed in?

Beverleyh
02-28-2015, 07:40 AM
I don't have an Android device to test on at the moment but it works as expected in my tests here on iPhone - the tip boxes vanish as soon as the text field loses focus. At no point do multiple boxes show - only one per focussed form field.

Please post a link to your page so I can see how you've set it up.