Any many websites, during the form filling process, we show error messages in tooltips. Today we are trying to achieve the same for our websites.
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'); } }); }); |
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 }); }); |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(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 } }); }); |
