HabbCrazy's Tooltip? HELP?

~~Moh~~ · 12-06-2010, 09:35 AM

Originally Posted by Apolva

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

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):

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>

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

Code:

<input type='text' id='rofl' />

will show

Code:

<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

Thread: HabbCrazy's Tooltip? HELP?

Thread Tools

Posting Permissions