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

关于jQuery的初学者问题：

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

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

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

$(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' } } }); 

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' }); });