Display a fixed "ToolTip" when an input receives focus, using jQuery
<p>Total beginner question about jQuery:</p>

<p>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.</p>

<p>I googled a bit and found <a href="http://craigsworks.com/projects/qtip/" rel="nofollow">qTip for jQuery</a>, but that seems to be a Plugin for Tooltips when hovering over something, but has the <a href="http://craigsworks.com/projects/qtip/demos/position/corner" rel="nofollow">layout and positioning</a> that I want.</p>

<p>My naive attempt to bind it to a textbox:</p>

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

<p>(The selector works, i'm not using #tbMyTextbox since it's ASP.net, and I am not using &lt;%= 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.).</p>

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

<p>Thanks!</p>

<p>Edit: Thanks, the Show Event does the trick!</p>

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