Page 1 of 1

Focus & Blur

Posted: Thu Jul 08, 2010 3:34 pm
by Nikas
Hi,

I'm working on a simple tooltip using jQuery. I am able to get it working with one text field, but not for all.

This is my jQuery.

Code: Select all

$(document).ready(function() {
	$("#fullname").focus(function() {
         $("span.hint").show();
    });
	$("#fullname").blur(function() {
         $("span.hint").hide();
    });
});
HTML

Code: Select all

<input type="text" name="fullname" id="fullname" maxlength="50" value="" /><span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer">&nbsp;</span></span> </div>
I want to addon in a way that, it is able to know which textfield I'm at and to display the hint accordingly.

Thank you.

Re: Focus & Blur

Posted: Thu Jul 08, 2010 5:54 pm
by kaszu
Hopefully comments will explain it

Code: Select all

//Create a plugin, it will allow to use $(...).tooltip
$.fn.tooltip = function () {
    //Go through all inputs in case selector matched several inputs
    //$(this) refers to all inputs matched by selector
    $(this).each(function () {

        //$(this) now refers only to one element, hopefully input
        $(this).focus(function () {
            //get next element (relatively to input), which is span.hint and show it
            $(this).next('span.hint').show();
        }).blur(function () {
            //get next element (relatively to input), which is span.hint and hide it
            $(this).next('span.hint').hide();
        });

    });
};

//Usage:
$('#fullname, #email, textarea').tooltip();

Re: Focus & Blur

Posted: Fri Jul 09, 2010 1:15 am
by Nikas
Thanks.

It works just like what I wanted.

Will be back if there is any issue in near future. :D

Re: Focus & Blur

Posted: Fri Jul 09, 2010 1:54 am
by Nikas
Hi,

I wanted most of the input to use the tooltip, just to exclude a few.

So what I'm doing is correct? It doesn't work quite right.

Code: Select all

$('input:text:not(#type_pt_dyear, #type_pt_dmonth, #type_pt_sal), select, textarea').tooltip();
edit: my mistake, I mistaken the tooltip jquery with validation jquery. :banghead: