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

【问题标题】：Display a fixed "ToolTip" when an input receives focus, using jQuery当输入获得焦点时显示固定的“工具提示”，使用 jQuery
【发布时间】：2009-07-23 13:06:01
【问题描述】：

关于 jQuery 的全部初学者问题：

我有一个包含多个文本框的表单（输入类型=“文本”）。我想在 TextBox 收到焦点时显示某种工具提示，并在失去焦点时隐藏它。理想情况下，工具提示应该是左侧或右侧的“语音”气泡。

我用谷歌搜索了一下，找到了qTip for jQuery，但当鼠标悬停在某物上时，它似乎是一个工具提示插件，但有我想要的layout and positioning。

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

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

（选择器有效，我没有使用 #tbMyTextbox，因为它是 ASP.net，并且我没有使用因为我的 .aspx 文件中没有任何代码，但那是关闭的 -主题 - 选择器本身可以与其他东西一起使用，所以我认为它很好。）。

谁能给我一个提示，或者告诉我一个不同的 jQuery 插件可以做到这一点？

谢谢！

编辑：谢谢，Show Event 成功了！

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

【问题讨论】：

标签： jquery

【解决方案1】：

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

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

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

另一种可能是使用 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'
    });
});

【讨论】：

也许您可以在回答中详细说明为什么这是“简单的方法”或比公认的答案更好？谢谢。