Hints outside Textbox

[erik216]

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]

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]

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

The display message is not close

How can I fixed in?

[Beverleyh]

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.