Ответ 1
Решения для версий Tooltipster 2.1, 3.0 и 4.0 включены в этот ответ.
Обратите внимание, что .tooltipster() только прикрепленные к type="text" input элемент в моих примерах ниже. Если ваша form содержит другие типы элементов ввода данных, такие как type="radio", type="date", textarea, select и т.д., Тогда вы должны соответствующим образом настроить ваш селектор или создать дополнительные экземпляры .tooltipster() для этих других элементы. В противном случае все с ошибками.
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
});
});
Во-вторых, используйте расширенные параметры errorPlacement: вместе с success: и errorPlacement: функции обратного вызова, встроенные в плагин Validate, чтобы автоматически показывать и скрывать подсказки следующим образом:
$(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
EDIT: обновленный код, чтобы воспользоваться преимуществами новых API-интерфейсов Tooltipster, выпущенных в версии 2.1 2/12/13
UPDATE для 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');
}
});
});
DEMO с помощью Tooltipster v3.0: jsfiddle.net/2DUX2/3/
UPDATE для Tooltipster v4.0
Обратите внимание, что опция onlyOne была удалена из версии 4.0 плагина Tooltipster.
Я также заменил обратный вызов 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: {
....
DEMO с помощью Tooltipster v4.0: https://jsfiddle.net/h5grrrr9/