<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"> </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.
//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();