Отображение фиксированной "подсказки", когда вход получает фокус, используя jQuery

Общий начальный вопрос о jQuery:

У меня есть Form, который содержит несколько TextBoxes (input type = "text" ). Я хотел бы показать какую-то подсказку, когда TextBox получает фокус и скрывает ее, когда теряет фокус. В идеале всплывающая подсказка должна быть "речевым" пузырем слева или справа.

Я немного искал Google и нашел qTip для jQuery, но это похоже на плагин для подсказок при зависании над чем-то, но имеет расположение и расположение, которые я хочу.

Моя наивная попытка связать его с текстовым полем:

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

(Селектор работает, я не использую #tbMyTextbox с его ASP.net, и я не использую <% = tbMyTextBox.ClientID% > , потому что у меня не может быть никакого кода в моем файле .aspx, но это не работает -topic - сам селектор работает с другим материалом, поэтому я предполагаю, что это хорошо.).

Может ли кто-нибудь дать мне подсказку, как он может работать или рассказать мне о другом плагине jQuery, который делает это?

Спасибо!

Изменить: спасибо, шоу-событие делает трюк!

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

Ответ 1

Вы можете создать свою подсказку вручную в элементе, скрытом с помощью display:none, который будет отображаться в обработчике события фокуса.

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

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

Другой возможностью может быть использование опции show в qTip. Я никогда не использовал qTip, так что это чисто теоретическое с моей точки зрения, но вы должны указать show: { when: { event: 'focus' } } в параметрах.

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

Ответ 2

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