Javascript Tooltipster，用于显示字段的工具提示和Jquery验证中的错误

我使用tooltipster插件显示字段的提示，并在底部使用另一个工具提示显示来自jquery验证插件的错误，但由于某些原因，所有消息更新都发生在第一个错误工具提示上

我错过了什么

$（文档）.ready（函数（）{
//在文本输入元素上初始化tooltipster
$（'input'）.tooltipster（）；
var tooltipsterErrorMsg=[]；
//初始化表单上的验证插件
$（“#myform”）。验证({
错误：功能（错误映射、错误列表）{
//清除有效元素的所有工具提示
$.each（this.validElements（），函数（索引，元素）{
如果（索引
#myform{
利润率：100像素；
}
输入{
利润率：20px；
}
a{
显示：块；
位置：绝对位置；
底部：0；
}
.错误{
颜色：#900；
}



两个问题

您未正确使用
淋浴RORS
功能。它仅用于构建错误列表，而不是用于单个错误放置。使用
errorPlacement
和
success
功能显示和隐藏单个工具提示气泡

errorPlacement: function(error, element) {
    var lastError = $(element).data('lastError'),
        newError = $(error).text(); // current error message

    $(element).data('lastError', newError); // keep track of the error

    if (newError !== '' && newError !== lastError) { // new error?
        $(element).tooltipster('content', newError); // replace message
        $(element).tooltipster('show');  // show bubble
    }
},
success: function(label, element) {
    $(element).tooltipster('hide'); // hide bubble when error clears
},


您试图在同一元素上初始化和重新初始化ToolTipster，以便在同一元素上同时显示两个不同的气泡。虽然我没有在您的演示中清楚地看到所描述的问题，但我可以看到它将如何导致问题和混乱

这里有一个解决办法

用容器元素包围
输入
元素

<div title="Tooltip teste 1">
    <input type="text" name="field1" />
</div>

然后分别在父容器上为提示初始化另一个ToolTipster实例

$('input[type="text"]').parent().tooltipster();

（我在这里更具体地介绍了目标。通过只针对
input
，您还可以匹配
type=“submit”
元素。）

概念验证演示：
好吧，正如Sparky推荐的那样，我使用errorPlacement和success实现了我所需要的，我将我所做的与他的示例混合在一起：


$（文档）.ready（函数（）{
//在文本输入元素上初始化tooltipster
$（'input'）.tooltipster（{position:'top'}）；
var tooltipsterErrorMsg=[]；
//初始化表单上的验证插件
$（“#myform”）。验证({
errorPlacement:函数（错误，元素）{
if（$（element.index（）==tooltipsterErrorMsg.length）{
var tooltipObject=$（元素）.tooltipster({
触发器：“自定义”，
多重：对，
位置：'底部'
});
ToolTipTererrorMsg.push（tooltipObject[0]）；
}
tooltipsterErrorMsg[$（元素）.index（）].content（$（错误）.text（））.show（）；
},
成功：功能（标签、元素）{
tooltipsterErrorMsg[$（元素）.index（）].hide（）；
},
submitHandler:函数（表单）{//用于演示
警报（“有效形式”）；
返回false；
}
});
});
#myform{
利润率：100像素；
}
输入{
利润率：20px；
}
a{
显示：块；
位置：绝对位置；
底部：0；
}
.错误{
颜色：#900；
}



。基本上，您的主要错误是试图使用
showErrors
功能。。。这只是为了制作一个集中的错误列表，与这样的事情没有任何关系。您只需正确使用
errorPlacement
和
success
函数。我已经开始使用您链接的此示例，但我确实希望使用工具提示作为字段提示，另一个作为错误消息提示。我在您所说的示例代码中看不到这一点。示例代码修复了jQuery验证集成。至于悬停提示，只需将您自己的工作代码集成到示例中。我重新打开问题并在下面发布了答案。-我使用您建议的回调重写了代码；-所需的数据规则是我在发布代码时忘记删除的；-我必须重新初始化，但将其设置为另一个对象，因为第一个初始化是针对悬停事件的，另一个是由验证触发的。谢谢，我非常感谢您花时间帮助我。请注意，您的ToolTipster气泡在每次按键事件后是如何重新呈现自己的，而我的情况是，气泡仅在消息更改时重新呈现自己。您仍然使用此选择器，
$（'input'）
锁定所有
input
元素。正如我在回答中提到的，这还包括
input type=“submit”
元素。您应该使用更具体的选择器，例如
$（'input[type=“text”]”）
。我将更改我的代码，以使用新的和上次的错误消息。关于目标元素，这只是为了测试，我只针对需要的元素。谢谢
$('input[type="text"]').parent().tooltipster();