Как отображать сообщения из jQuery Подтвердить плагин внутри всплывающих подсказок Tooltipster?

Ответ 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/

Ответ 2

Sparky ответ был основным элементом проверки моего сайта, но для обновления до Tooltipster 4 потребовались некоторые изменения. Здесь, как я получил свою работу, и с некоторыми улучшениями.

На ваших страницах включите tooltipster css и тему css в разделе head (и любую тему css, на которую вы подклассируете свои темы, как описано на ее странице).

<link rel="stylesheet" type="text/css" href="/styles/tooltipster.bundle.css">
<link rel="stylesheet" type="text/css" href="/styles/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css">

Кроме того, вам необходимо включить javascript файл tooltipster. Вам также понадобится javascript-проверка javascript.

<script src="/js/tooltipster.bundle.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>

Теперь, в любом другом файле javascript или в некоторых тегах script, вам нужно будет поместить ваш код проверки, а также код вашего инструментария. Здесь один из веб-страницы, которую я имею, изменения от ответа Sparky находятся наверху.

$(document).ready(function(){

    $('#form input[type="text"]').tooltipster({ //find more options on the tooltipster page
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false,    // allow multiple tips to be open at a time
        position: 'top',
        animation: 'grow', 
        theme: ['tooltipster-light'] //put your themes here
    });

    //form validation initialization
    $("#form").validate({
        errorPlacement: function (error, element) {
            if (error[0].innerHTML != null && error[0].innerHTML !== "") {
                $(element).tooltipster('content', $(error).text());
                $(element).tooltipster('open'); //open only if the error message is not blank. By default jquery-validate will return a label with no actual text in it so we have to check the innerHTML.
            }
        },
        success: function (label, element) {
            var obj = $(element);
            if (obj.hasClass('tooltipstered') && obj.hasClass('error')) {
                $(element).tooltipster('close'); //hide no longer works in v4, must use close
            }   
        },
        rules: {
            // your rules
            ......
        }
    });

});

Теперь, когда вы вводите что-то в поле, которое нарушает одно из перечисленных правил, всплывающее окно появляется над полем, в котором указано, что jquery-validate говорит неправильно. Он также не откроет сообщение, если в нем нет ничего, чтобы показать пользователя (что приведет к открытию пустой всплывающей подсказки, а затем немедленно закрытию, что выглядит странно).