How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

Question

I'd like to use the Tooltipster plugin to display form errors generated by the jQuery Validate plugin.

jQuery for Validate plugin:

$(document).ready(function () {

    $('#myform').validate({ // initialize jQuery Validate
        // other options,
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

jQuery for Tooltipster plugin:

$(document).ready(function () {

    $('.tooltip').tooltipster({ /* options */ });  // initialize tooltipster

});

HTML:

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <br/>
    <input type="submit" />
</form>

How would I integrate the usage of these two jQuery plugins so that validation errors appear inside the tooltips?

Answer 1

Solutions for Tooltipster versions 2.1, 3.0, & 4.0 are included in this answer.

NOTE that .tooltipster() is only attached to a type="text" input element in my examples below. If your form contains other kinds of data input elements such as type="radio", type="date", textarea, select, etc., then you must adjust your selector accordingly or create additional instances of .tooltipster() for these other elements. Otherwise, everything will fail with errors.

---

Tooltipster v2.1

First, initialize the Tooltipster plugin (with any options) on all specific form elements that will display errors:

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

});

Second, use Tooltipster's advanced options along with the success: and errorPlacement: callback functions built into the Validate plugin to automatically show and hide the tooltips as follows:

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

});

Working Demo: http://jsfiddle.net/2DUX2

EDIT: Updated code to take advantage of the new Tooltipster API features released in version 2.1 on 2/12/13

---

---

UPDATE for Tooltipster v3.0

Tooltipster 3.0 is out and as such doesn't work the same as illustrated above. The following code provides an updated example. This version has the added benefit of not calling Tooltipster on every keystroke when the message has not yet changed.

(Don't forget that you still need to attach .tooltipster() to your relevant input elements as illustrated above.)

$(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 using Tooltipster v3.0: jsfiddle.net/2DUX2/3/

---

---

UPDATE for Tooltipster v4.0

Note that the onlyOne option has been removed from the 4.0 version of the Tooltipster plugin.

I also replaced the success callback with unhighlight. On "optional" fields, the error message was never removed when the field was subsequently blanked out... this is because the success function does not fire under these circumstances. This issue is not isolated to Tooltipster version 4, however the following code solves it moving forward.

// 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 using Tooltipster v4.0: https://jsfiddle.net/h5grrrr9/