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:

Answer 1

Sparky's answer has been a staple on my site's validation, but upgrading to Tooltipster 4 required some changes. Here's how I got mine working, and with a few improvements.

On your pages, include the tooltipster css and a theme css in the head section (and any theme css that you subclass their themes with as described on its page).

Additionally, you need to include tooltipster's javascript file. You'll also need the jquery-validation javascript.

Now, in either another javascript file or in some script tags, you'll need to put your validation code as well as your tooltipster code. Here's one from a webpage I have, the changes from Sparky's answer are at the top.

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

});

Now when you type something into a field that violates one of the listed rules, a popup comes up above the box saying what jquery-validate says is wrong. It also won't open a message if there is nothing in it to show the user (which would lead to it opening a blank tooltip and then immediately closing, which looks weird).