Hey, does anyone know where to find the script for this tooltip?
http://i45.tinypic.com/k4vw95.png
Thanks in advance, +REP will be added
Lew.
Printable View
Hey, does anyone know where to find the script for this tooltip?
http://i45.tinypic.com/k4vw95.png
Thanks in advance, +REP will be added
Lew.
Does it need to come with bad spelling as well? Or literally just the tooltip?
There isn't any spelling mistakes?Quote:
Originally Posted by Source
The tooltip is simply a onblur and onfocus event that shows and hides it :)
Should be desired, not desire.Quote:
Originally Posted by Jack120
Give dynamicdrive a go, most of the time you can customise them to make them look like that using CSS. :)
http://www.nickstakenburg.com/projects/prototip/ It's called Prototip, and I think it's using this older version.
Newer one is here: http://www.nickstakenburg.com/projects/prototip2/
Hamhey, he wanted a jQuery based one. That one is based on the prototype/scriptaculous library.
Quote:
Originally Posted by Jack120
Fancy explaining how you did that cos i been looking for a while lol :)
Lew.
Do you currently have any javascript framework?
I have nothing, hence why im asking around :P
Lew.
You sure that's even a tooltip? Looks to me like a span tag on the same line as the text box.
I think it could still be classed as a tooltip :PQuote:
Originally Posted by Apolva
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