PDA

View Full Version : HabbCrazy's Tooltip? HELP?


LMS16
11-06-2010, 10:29 AM
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.
Source
11-06-2010, 01:47 PM
Does it need to come with bad spelling as well? Or literally just the tooltip?
Moh
11-06-2010, 01:51 PM
Does it need to come with bad spelling as well? Or literally just the tooltip?
There isn't any spelling mistakes?

The tooltip is simply a onblur and onfocus event that shows and hides it :)
myke
11-06-2010, 02:10 PM
There isn't any spelling mistakes?

The tooltip is simply a onblur and onfocus event that shows and hides it :)

Should be desired, not desire.

Give dynamicdrive a go, most of the time you can customise them to make them look like that using CSS. :)
hamheyelliot
11-06-2010, 03:21 PM
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/
Source
11-06-2010, 07:04 PM
Hamhey, he wanted a jQuery based one. That one is based on the prototype/scriptaculous library.
LMS16
11-06-2010, 08:31 PM
There isn't any spelling mistakes?

The tooltip is simply a onblur and onfocus event that shows and hides it :)


Fancy explaining how you did that cos i been looking for a while lol :)

Lew.
Moh
11-06-2010, 08:35 PM
Do you currently have any javascript framework?
LMS16
11-06-2010, 09:12 PM
I have nothing, hence why im asking around :P

Lew.
Apolva
12-06-2010, 09:20 AM
You sure that's even a tooltip? Looks to me like a span tag on the same line as the text box.
Moh
12-06-2010, 09:35 AM
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 :P
LMS16
12-06-2010, 10:01 AM
Im still looking for some help? pls?

Lew.
Apolva
12-06-2010, 11:55 AM
Here's a quick example I wrote up (untested, may not work):



<!-- 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>
Source
12-06-2010, 01:13 PM
Would indentation kill you Apolva? Really? Arghhh messy code is messy.
LMS16
12-06-2010, 02:30 PM
Indeed, im rubbish with js, could someone fix the above code pls lol, this makes me sounds really nooby! ;/

Lew.
Apolva
12-06-2010, 04:23 PM
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 on
<input type='text' id='rofl' /> will show
<span id='rofl_tip'>hi</span> using CSS. (it then hide it when you unfocus on the input)


Just open it in your browser and mess around with the code a bit, it's quite easy to understand
eddiekins
16-06-2010, 09:48 PM
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

Want to hide these adverts? Register an account for free!