Prerequisites:
– Tooltipster Plugin version 2.1 or 3.0 (The raw code for version 2.1 can be found inside the first jsFiddle below.)
– jQuery Validate Plugin
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: jsfiddle.net/2DUX2
Note that this code example takes advantage of the new Tooltipster API features released in version 2.1 on 2/12/13
For Tooltipster version 3.0
The latest version of Tooltipster, version 3.0, is supposed to be working more correctly than version 2.1.
That’s fine, except that an animation flicker is now occurring on every single keystroke even when no content has changed. I suppose we could disable the default `onkeyup` option in jQuery Validate, but when multiple rules are used, the user would not be aware of his data entry violation until after leaving the field or clicking the submit button.
The workaround is to set the `updateAnimation` option to `false`.
$(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
updateAnimation: false // stops the flicker on every keyup
});
});
Demo: jsfiddle.net/2DUX2/2/
I’ve made a suggestion to the developer to simply check the new incoming content against the existing content and only run the animation when they’re different. I can see other practical applications for this… any situation where the same content is sent repeatedly but yet we still want an animation to occur when/if it changes. I’ll update this posting as the situation warrants.
UPDATE:
The Tooltipster developer made the following suggestion to preserve the message update animation in version 3.0, which works very nicely. From within the jQuery Validate plugin’s `errorPlacement` callback function, this simple code makes sure the error message is not blank and has changed before calling Tooltipster’s `show` method. This has the added benefit of greatly reducing the number of calls to Tooltipster.
$(document).ready(function () {
// initialize validate plugin on the form
$('#myform').validate({
// any other options & rules,
errorPlacement: function (error, element) {
var lastError = $(element).data('lastError'), // get the last message if one exists
newError = $(error).text(); // set the current message
$(element).data('lastError', newError); // set "lastError" to the current message for the next time 'errorPlacement' is called
if(newError !== '' && newError !== lastError){ // make sure the message is not blank and not equal to the last message before allowing the Tooltip to update itself
$(element).tooltipster('content', newError); // insert content into tooltip
$(element).tooltipster('show'); // show the tooltip
}
},
success: function (label, element) {
$(element).tooltipster('hide'); // hide tooltip when field passes validation
}
});
});
Demo: jsfiddle.net/2DUX2/3/