JQuery表单工具提示

Question

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

alt text http://i50.tinypic.com/1sehlj.png

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

在html/javascript中有些东西:

<input type="text" id="VIN" name="VIN" class="tooltipped">

<label for="VIN" class="formfieldtooltip">A vehicle Iden... </label>

<input type="text" id="Brand" name="Brand" class="tooltipped">

<label for="Brand" class="formfieldtooltip">In Danish "brand" means "fire"</label>

<script type="text/javascript">

    jQuery(function($) {

        $(".tooltipped").FormFieldToolTipBinder();

    });

</script>

它通过"tooltipped"类运行所有表单字段,并在焦点上显示关联的标签.

这样的事情是否存在,或者我必须自己写吗？

是的,我已经google了 - 并且发现了许多插件来制作实际的工具提示,但没有任何东西可以像这样自动地将它们连接到formfields.

Answer 1

听起来你可能会在工具提示中嵌入工具提示内容label- 但是如果你可以将内容移动到元素的alt属性中input,你可以用qTip做你想要的,如下所示:

<input type="text" id="VIN" class="tooltipped" alt="A vehicle iden...">

和

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