当输入获得焦点时显示固定的“工具提示”，使用 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1171575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display a fixed "ToolTip" when an input receives focus, using jQuery
提问by Michael Stum
Total beginner question about jQuery:
关于 jQuery 的初学者总问题：
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.
我有一个包含多个文本框的表单（输入类型 =“文本”）。我想在 TextBox 获得焦点时显示某种工具提示，并在失去焦点时隐藏它。理想情况下，工具提示应该是左侧或右侧的“语音”气泡。
I googled a bit and found qTip for jQuery, but that seems to be a Plugin for Tooltips when hovering over something, but has the layout and positioningthat I want.
我用谷歌搜索了一下，找到了qTip for jQuery，但是当鼠标悬停在某个东西上时，它似乎是 Tooltips 的插件，但具有我想要的布局和定位。
My naive attempt to bind it to a textbox:
我天真地尝试将其绑定到文本框：
$(function() {
$("input[id$=tbMyTextbox]").qtip({
content: 'My Tooltip Text'
});
});
(The selector works, i'm not using #tbMyTextbox since it's ASP.net, and I am not using <%= 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.).
（选择器有效，我没有使用 #tbMyTextbox，因为它是 ASP.net，我没有使用 <%= tbMyTextBox.ClientID %> 因为我的 .aspx 文件中没有任何代码，但这是题外话 -选择器本身适用于其他东西，所以我认为它很好。）。
Can anyone give me a hint how it could work or tell me about a different jQuery plugin that does that?
谁能给我一个提示，它是如何工作的，或者告诉我一个不同的 jQuery 插件可以做到这一点吗？
Thanks!
谢谢！
Edit: Thanks, the Show Event does the trick!
编辑：谢谢，表演活动可以解决问题！
$("input[id$=tbMyTextbox]").qtip({
content: 'Test',
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
},
show: {
when: {
event: 'focus'
}
},
hide: {
when: {
event: 'blur'
}
}
});
回答by DLH
You could create your tooltip manually in an element hidden with display:nonewhich would be shown in a focus event handler.
您可以在隐藏的元素中手动创建工具提示，该元素display:none将显示在焦点事件处理程序中。
$("input[id$=tbMyTextbox]").focus(function() {
$("div[id$=tooltip]").show();
});
$("input[id$=tbMyTextbox]").blur(function() {
$("div[id$=tooltip]").hide();
});
Another possibility might be using the show option in qTip. I've never used qTip, so this is purely theoretical on my end, but you should be able to specify show: { when: { event: 'focus' } }in the options.
另一种可能性可能是在 qTip 中使用 show 选项。我从未使用过 qTip，所以这纯粹是理论上的，但您应该能够show: { when: { event: 'focus' } }在选项中指定。
回答by toha
$(function() {
$("input[id$=tbMyTextbox]").qtip({
content: 'My Tooltip Text',
show: 'focus',
hide: 'blur'
});
});
