jQuery表单工具提示

问题描述：

在大表格中，我想在每个表格字段处于活动状态时显示其他信息，如下所示:

In a big form, I want to display additional information on each form field when they are active, something like this:

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

So each form field has an associated tip text, and this tip text is displayed on focus.

某些内容在html/javascript中链接:

Something linke this in 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>

该类贯穿所有带有工具提示"类的表单字段，并在焦点上显示关联的标签.

That runs through all form fields with the class "tooltipped" and displays the associated label on focus.

这样的东西已经存在了吗，还是我必须自己写呢?

Does something like that exist already, or do I have to write it myself?

是的，我在Google上进行了搜索-找到了许多插件来制作实际的工具提示，但没有任何东西可以像这样自动地将它们与formfields相连.

And yes, I have googled - and found a lot of plugins to make the actual tooltips, but nothing that wires them up with formfields automagically like this.

答

听起来您可能被困在label元素中嵌入工具提示内容-但是如果您可以随意将内容移动到alt属性中的input元素中，您可以使用qTip 做您想做的事情，如下所示:

It sounds like you may be stuck embedding tooltip content in the label elements - but if you're free to move the content into the alt attribute of your input elements, you can do what you want with qTip, like this:

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

相关推荐