Display a fixed "ToolTip" when an input receives focus, using jQuery

Question

Total beginner question about jQuery:

I have a Form that contains several TextBoxes (input type="text"). I would like to display some sort of Tooltip when the TextBox receives focus and hide it when it loses focus. Ideally, the tooltip should be a "speech" bubble on the left or right side.

I googled a bit and found qTip for jQuery, but that seems to be a Plugin for Tooltips when hovering over something, but has the layout and positioning that I want.

My naive attempt to bind it to a textbox:

$(function() {
    $("input[id$=tbMyTextbox]").qtip({
        content: 'My Tooltip Text'
    });
});

(The selector works, i'm not using #tbMyTextbox since it's ASP.net, and I am not using <%= tbMyTextBox.ClientID %> because I cannot have any code in my .aspx file, but that's off-topic - the selector itself works with other stuff, so I assume it's fine.).

Can anyone give me a hint how it could work or tell me about a different jQuery plugin that does that?

Thanks!

Edit: Thanks, the Show Event does the trick!

    $("input[id$=tbMyTextbox]").qtip({
        content: 'Test',
        position: {
            corner: {
                target: 'rightMiddle',
                tooltip: 'leftMiddle'
            }
        },
        show: {
            when: {
                event: 'focus'
            }
        },
        hide: {
            when: {
                event: 'blur'
            }
        }
    });

Answer 1

You could create your tooltip manually in an element hidden with display:none which would be shown in a focus event handler.

$("input[id$=tbMyTextbox]").focus(function() {
   $("div[id$=tooltip]").show();
});

$("input[id$=tbMyTextbox]").blur(function() {
   $("div[id$=tooltip]").hide();
});

Another possibility might be using the show option in qTip. I've never used qTip, so this is purely theoretical on my end, but you should be able to specify show: { when: { event: 'focus' } } in the options.

http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 2

$(function() {
    $("input[id$=tbMyTextbox]").qtip({
        content: 'My Tooltip Text',
        show: 'focus',
        hide: 'blur'
    });
});