此答案中包含 Tooltipster 版本 2.1、3.0 和 4.0 的解决方案。
注意，这.tooltipster()仅附加到type="text" input我下面示例中的元素。如果您form包含其他类型的数据输入元素，例如type="radio", type="date", textarea,select等，那么您必须.tooltipster()相应地调整您的选择器或为这些其他元素创建额外的实例。否则，一切都会因错误而失败。
工具提示器 v2.1
首先，在所有将显示错误的特定元素上初始化 Tooltipster 插件（使用任何选项） ：form
$(document).ready(function () {
// initialize tooltipster on form input elements
$('#myform input[type="text"]').tooltipster({
trigger: 'custom', // default is 'hover' which is no good here
onlyOne: false, // allow multiple tips to be open at a time
position: 'right' // display the tips to the right of the element
});
});
其次，使用Tooltipster 的高级选项以及Validate 插件中内置的回调函数success:来errorPlacement:自动显示和隐藏工具提示，如下所示：
$(document).ready(function () {
// initialize validate plugin on the form
$('#myform').validate({
// any other options & rules,
errorPlacement: function (error, element) {
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');
},
success: function (label, element) {
$(element).tooltipster('hide');
}
});
});
工作演示：http: //jsfiddle.net/2DUX2
编辑：更新代码以利用 2/12/13 版本 2.1 中发布的新 Tooltipster API 功能
Tooltipster v3.0 的更新
Tooltipster 3.0 已经发布，因此与上面所示的工作方式不同。以下代码提供了一个更新的示例。此版本的额外好处是，当消息尚未更改时，不会在每次击键时调用 Tooltipster。
（不要忘记您仍然需要附加.tooltipster()到您的相关input元素，如上图所示。）
$(document).ready(function () {
// initialize validate plugin on the form
$('#myform').validate({
// any other options & rules,
errorPlacement: function (error, element) {
var lastError = $(element).data('lastError'),
newError = $(error).text();
$(element).data('lastError', newError);
if(newError !== '' && newError !== lastError){
$(element).tooltipster('content', newError);
$(element).tooltipster('show');
}
},
success: function (label, element) {
$(element).tooltipster('hide');
}
});
});
使用 Tooltipster v3.0 的演示：jsfiddle.net/2DUX2/3/
Tooltipster v4.0 的更新
请注意，该onlyOne选项已从 Tooltipster 插件的 4.0 版本中删除。
我还将success回调替换为unhighlight. 在“可选”字段上，当该字段随后被空白时，错误消息从未被删除......这是因为success在这些情况下该函数不会触发。此问题并非孤立于 Tooltipster 版本 4，但以下代码可解决此问题。
// initialize Tooltipster on text input elements
$('input[type="text"]').tooltipster({ //find more options on the tooltipster page
trigger: 'custom', // default is 'hover' which is no good here
position: 'top',
animation: 'grow'
});
// initialize jQuery Validate
$("#myform").validate({
errorPlacement: function (error, element) {
var ele = $(element),
err = $(error),
msg = err.text();
if (msg != null && msg !== '') {
ele.tooltipster('content', msg);
ele.tooltipster('open');
}
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass).tooltipster('close');
},
rules: {
....
使用 Tooltipster v4.0 的演示： https ://jsfiddle.net/h5grrrr9/