Comment faire pour afficher des messages à partir de jQuery Valider plugin à l'intérieur de Tooltipster info-bulles?

Solutions pour Tooltipster les versions 2.1, 3.0, & 4.0 sont inclus dans cette réponse.

NOTE que .tooltipster() est uniquement lié à un type="text" input élément dans mes exemples ci-dessous. Si votre form contient d'autres types de données d'entrée des éléments tels que type="radio", type="date", textarea, select, etc., ensuite, vous doit régler le sélecteur en conséquence ou en créer d'autres instances de .tooltipster() pour ces autres éléments. Sinon, tout échoue avec des erreurs.

---

Tooltipster v2.1

Tout d'abord, initialisez le Tooltipster plugin (avec toutes les options) sur tous spécifiques form éléments des erreurs d'affichage:

$(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
    });

});

Deuxièmement, l'utilisation Tooltipster advanced options avec le succès: et errorPlacement: fonctions de rappel intégré dans le Valider plugin automatiquement afficher et de masquer les info-bulles comme suit:

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

});

De Travail De Démonstration: http://jsfiddle.net/2DUX2

MODIFIER: mise à Jour de code pour profiter de la nouvelle Tooltipster fonctionnalités de l'API de sortir en version 2.1 sur 2/12/13

---

---

Mise à JOUR pour Tooltipster v3.0

Tooltipster 3.0 est sorti et en tant que tel ne fonctionne pas de la même comme illustré ci-dessus. Le code suivant fournit une mise à jour de l'exemple. Cette version a l'avantage de ne pas appeler Tooltipster sur chaque frappe de touche lorsque le message n'a pas encore changé.

(N'oubliez pas que vous devez toujours joindre .tooltipster() à votre input éléments comme illustré ci-dessus.)

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

});

De DÉMONSTRATION à l'aide de Tooltipster v3.0: jsfiddle.net/2DUX2/3/

---

---

Mise à JOUR pour Tooltipster v4.0

Noter que le onlyOne option a été supprimée de la version 4.0 du Tooltipster plugin.

J'ai aussi remplacé la success rappel avec unhighlight. Sur "option" champs, le message d'erreur n'a jamais été supprimées lorsque le terrain a ensuite été masquée... c'est parce que le success fonction ne se déclenche pas dans ces circonstances. Ce problème n'est pas isolé dans Tooltipster version 4, cependant le code suivant résout aller de l'avant.

//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: {
        ....

De DÉMONSTRATION à l'aide de Tooltipster v4.0: https://jsfiddle.net/h5grrrr9/