Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Working Demo: <a href="http://jsfiddle.net/bvu5f/" rel="nofollow">http://jsfiddle.net/bvu5f/</a></strong></p> <p>This answer uses a jQuery plugin called <a href="http://calebjacob.com/tooltipster/" rel="nofollow">Tooltipster</a> along with the jQuery Validate plugin.</p> <p>First, initialize the Tooltipster plugin (<a href="http://calebjacob.com/tooltipster/#options" rel="nofollow">with any options</a>) on <strong>all</strong> specific <code>form</code> elements that will display errors:</p> <pre class="lang-js prettyprint-override"><code>$(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 }); }); </code></pre> <p>Second, use <a href="http://calebjacob.com/tooltipster/#advanced" rel="nofollow">Tooltipster's advanced options</a> along with the <a href="http://docs.jquery.com/Plugins/Validation/validate#toptions" rel="nofollow"><code>success:</code> and <code>errorPlacement:</code> callback functions built into the Validate plugin</a> to automatically show and hide the tooltips as follows:</p> <pre class="lang-js prettyprint-override"><code>$(document).ready(function () { // initialize validate plugin on the form $('#myform').validate({ // any other options &amp; rules, errorPlacement: function (error, element) { $(element).tooltipster('update', $(error).text()); $(element).tooltipster('show'); }, success: function (label, element) { // $(element).tooltipster('hide'); // normal validate behavior $(element).tooltipster('update', 'accepted'); // as per OP } }); }); </code></pre> <p>Code takes advantage of the new Tooltipster API features released in version 2.1 on 2/12/13</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload