JQuery表单工具提示

在一个大的forms中，我希望在每个表单字段处于活动状态时显示其他信息，如下所示：

alt text http://sofzh.miximages.com/jquery/1sehlj.png

因此，每个表单字段都有一个关联的提示文本，此提示文本显示在焦点上。

在html / javascript中有些东西：

 A vehicle Iden...   In Danish "brand" means "fire"  jQuery(function($) { $(".tooltipped").FormFieldToolTipBinder(); });  

它遍历所有带有“tooltipped”类的表单字段，并在焦点上显示关联的标签。

有类似的东西已经存在，还是我必须自己写？

是的，我已经google了 – 并且发现了很多插件来制作实际的工具提示，但没有任何东西可以像这样自动地将它们与表单字段连接起来。

Answer 1

听起来您可能会在label元素中嵌入工具提示内容 – 但如果您可以将内容移动到input元素的alt属性中，则可以使用qTip执行所需操作 ，如下所示：

和

 // content: false tells qtip to use the selected elements' alt text $('.tooltipped').qtip({ content: false, show: { when: { event: 'focus' } } }); 

Answer 2

实际上，写自己很容易。 这是让你入门的东西：

 var tooltip = function (formElementId) { var form = $('#' + formElementId), toolTipClass = 'tooltip', input = form.find('input.'+ tooltip); input.each(function (index, elem) { $(elem).focus(function () { $(this).parent().append('
'); }) $(elem).blur(function () { $('#tooltip').remove(); }) }); }