JQuery表单工具提示

Question

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

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

有些东西在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”类运行所有表单字段，并在焦点上显示关联的标签。

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

是的，我用谷歌搜索了 - 发现了很多插件来制作实际的工具提示，但没有任何东西可以自动将这些插件连接起来。

Answer 1

听起来您可能会在label元素中嵌入工具提示内容 - 但如果您可以将内容移动到alt元素的input属性中，{ {3}}，像这样：

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

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('<div id="tooltip"></div>');
        })

        $(elem).blur(function () {
            $('#tooltip').remove();
        })
    });
}