使用jQuery在输入获得焦点时显示固定的"工具提示"

Question

关于jQuery的初学者问题:

我有一个包含几个TextBox的表单(输入类型="文本").我希望在TextBox获得焦点时显示某种Tooltip,并在它失去焦点时隐藏它.理想情况下,工具提示应该是左侧或右侧的"语音"气泡.

我google了一下,找到了jQuery的qTip,但是当它悬停在某个东西上时,它似乎是一个工具提示插件,但具有我想要的布局和定位.

我天真地试图将它绑定到文本框:

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

(选择器工作,我没有使用#tbMyTextbox,因为它是ASP.net,我没有使用<%= tbMyTextBox.ClientID%>,因为我的.aspx文件中没有任何代码,但这不是主题 - 选择器本身与其他东西一起工作,所以我认为它很好.)

任何人都可以给我一个暗示它是如何工作或告诉我有关不同的jQuery插件吗？

谢谢!

编辑:谢谢,Show Event诀窍!

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

Answer 1

您可以在隐藏的元素中手动创建工具提示,该元素display:none将显示在焦点事件处理程序中.

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

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

另一种可能是使用qTip中的show选项.我从来没有使用过qTip,所以这完全是理论上的,但你应该可以show: { when: { event: 'focus' } }在选项中指定.

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