Question

关于jQuery的初学者问题：

我有一个包含多个TextBox的表单（input type =“text”）。我希望在TextBox获得焦点时显示某种Tooltip，并在它失去焦点时隐藏它。理想情况下，工具提示应该是左侧或右侧的“语音”气泡。

我搜索了一下，发现了qTip for jQuery，但是当它悬停在某个东西上时，这似乎是一个工具提示的插件，但却有我想要的layout and positioning。

我天真地尝试将其绑定到文本框：

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

（选择器工作，我没有使用#tbMyTextbox，因为它是ASP.net，我没有使用＆lt;％= tbMyTextBox.ClientID％＆gt;因为我的.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

Answer 2

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

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

2 个答案: