Question

So I need to add tooltips for some input fields and textareas. Currently, I have it setup like this:

$(document).ready(function(){
    $('input').focus(function(){
       var p = $(this);
       var position = p.position();
       var input_name = $(this).attr('id');
       var name = '#'+input_name+'_help'; 
       $('#apply_tooltip').css("left", position.left - 310 );
       $('#apply_tooltip').css("top", position.top -15 );
       $(name).show();
       $('#apply_tooltip').show();


    });
    $('input').blur(function(){
        $('.tooltip_inner').hide();
        $('#apply_tooltip').hide(); 


    });


    $('textarea').focus(function(){
       var p = $(this);
       var position = p.position();
       var input_name = $(this).attr('id');
       var name = '#'+input_name+'_help'; 
       $('#apply_tooltip').css("left", position.left - 310 );
       $('#apply_tooltip').css("top", position.top -15 );
       $(name).show();
       $('#apply_tooltip').show();


    });
    $('textarea').blur(function(){
        $('.tooltip_inner').hide();
        $('#apply_tooltip').hide(); 


    });


}); 

This works, but obviously there is probably a more efficient solution than simply duplicating the functions… Is there anyway to target both input fields and textareas with the same functions?

Answer 1

Instead of this:

$('input').focus(function(){

you can use this to get both types of objects with the same jQuery object and thus the same function:

$('input, textarea').focus(function(){

Though this isn’t needed here, you ought to know that you can also put common code in a function and call that one function from multiple places rather than copying code into multiple places. Basically, you should pretty much never copy the same block of code into multiple places.