I think it could still be classed as a tooltip :P
Printable View
Im still looking for some help? pls?
Lew.
Here's a quick example I wrote up (untested, may not work):
Code:<!-- Style + jQuery include -->
<head><style>.tip{border:1px solid #555;background:#EEE;display:none;}</style></head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<!-- Your form -->
<form>
<table>
<tr><td>Username</td><td><input type='text' id='username' name='username' /></td><td><span id='username_tip' class='tip'>Type your name</span></td></tr>
<tr><td>Password</td><td><input type='text' id='password' name='password' /></td><td><span id='password_tip' class='tip'>Type your password</span></td></tr>
<tr><td></td><td><input type='submit' value='Log in' /></td></tr>
</table>
</form>
<!-- Tooltip script -->
<script>
$('input:text').focus(function(){
$('#'+$(this).attr('id')+'_tip').fadeIn();
}).blur(function(){
$('#'+$(this).attr('id')+'_tip').fadeOut();
});
</script>
Would indentation kill you Apolva? Really? Arghhh messy code is messy.
Indeed, im rubbish with js, could someone fix the above code pls lol, this makes me sounds really nooby! ;/
Lew.
It works.
When you focus on any text input (NOT textarea), it will try to find another element with the same ID but with _tip after, eg. "originalID_tip", and will show/hide it.
So focusing onwill showCode:<input type='text' id='rofl' />
using CSS. (it then hide it when you unfocus on the input)Code:<span id='rofl_tip'>hi</span>
Just open it in your browser and mess around with the code a bit, it's quite easy to understand
This is exactly what you need. http://www.nickstakenburg.com/projects/prototip/
If you need a hand implementing that, please PM me. I was just playing around with it on my test server and it works really well :P