jQuery select for element variable

I haven't been able 开发者_运维百科to find an answer to this:

My HTML (simplified) looks similar to this (there are several different controls on the page: text fields, comboboxes, etc.):

...
<input name="name" onfocus="showHint(this, 'Please enter your name')" onblur="hideHint()" ...>
...

An in the javascript function showHint I do something like:

function showFormEntryHint(control, text)
{
    localOffset = 30;
    $('#entry_hint').html(text);
    var position = $(control).offset();
    position.left += $(this).offset() + localOffset;
    position.top -= 5;
    $('#entry_hint').position(position);
    $('#entry_hint').fadeIn();
}

The idea is to position the #entry_hint div next to the field that invoked the function. Unfortunately, selector $(control) does not seem to work - and .offset() on it always returns {left: 0, top: 0}.

Any idea how I can get this to work? Many thanks!

You're using jQuery anyway; why stick to DOM0-style event handlers?

Do it like this:

<!-- simplified -->
<input id='someInput' />

<script type='text/javascript'>
jQuery(function($) {

    // this is where we attach the event handlers
    $('input#someInput')
    .focus(function() {
        showFormEntryHint(this, 'Please enter your name.');
    })
    .blur(function() {
        hideHint();
    });
});
</script>

Barring that however, you can also look for ready-made plugins to do the brunt work for you if you don't need much custom logic.

well just get rid of the control and you can use $(this) like you do for position.left. not sure what you are trying to accomplish with $(control).