JQuery UI Tooltip with jQuery Steps, tooltips after validation

JQuery UI Tooltip with jQuery Steps, tooltips after validation

Hi, i use jQuery Steps for bulid form, jQuery UI tooltip for show validation errors, jQuery Validation Plugin for validate code bellow:

css
  1. <style>
  2. .wizard > .content > .body input
  3. {
  4.         width: 180px;
  5.         display: inline-block;
  6. }
  7. .wizard > .content > .body label.error {                       
  8.         display: none !important;
  9.         background: #fbe3e4;
  10.         border: 1px solid #fbc2c4;
  11.         color: #8a1f11;
  12. }
  13. .wizard > .content > .body label
  14. {
  15.         width: 150px;
  16.         text-align: right;
  17.         display: inline-block;
  18. }
  19.         label.error{
  20.         display: none !important;
  21. }
  22. </style> 

html

  1. <form id="new_employ_form" action="#">
  2.     <div>
  3.         <h3>Dane personalne</h3>
  4.         <section>
  5.                 <p>(*)Pola wymagane</p>
  6.                 <label for="imie">Imie: *</label>
  7.                 <input id="imie" name="imie" type="text" class="required">
  8.                 <label for="nazwisko">Nazwisko: *</label>
  9.                 <input id="nazwisko" name="nazwisko" type="text" class="required">
  10.                 <label for="telefon_stac">Telefon stacjonarny:</label>
  11.                 <input id="telefon_stac" name="telefon_stac" type="text">
  12.                 <br />
  13.                 <label for="telefon_kom">Telefon komórkowy:</label>
  14.                 <input id="telefon_kom" name="telefon_kom" type="text">
  15.         </section>  
  16.         <h3>x</h3>
  17.         <section>
  18.         </section>    
  19.         <h3>x</h3>
  20.         <section>
  21.         </section>   
  22.         <h3>x</h3>
  23.         <section>
  24.         </section>    
  25.     </div>
  26. </form>
js
  1. <script>
  2. var form = $("#new_employ_form");
  3. form.children("div").steps({
  4.     headerTag: "h3",
  5.     bodyTag: "section",
  6.     transitionEffect: "slideLeft",
  7.     onStepChanging: function (event, currentIndex, newIndex)
  8.     {
  9.         form.validate().settings.ignore = ":disabled,:hidden";
  10.         var k=form.valid();
  11.         if(!k)
  12.         {
  13.             $(function () {
  14.                 var tooltips = $(document).tooltip({
  15.                     items: "input",
  16.                     position:   {
  17.                         my: "center bottom",
  18.                         at: "center top-5"
  19.                     },
  20.                     content: function () {
  21.                     var element = $(this);
  22.                     if (element.hasClass("error")) {
  23.                         if (element.hasClass("required"))
  24.                                 return "Fill it!";
  25.                         }
  26.                     }
  27.                 });
  28.                 $(document).tooltip("open");
  29.             });     
  30.         }
  31.         return k;
  32.     },
  33.     onFinishing: function (event, currentIndex)
  34.     {
  35.         form.validate().settings.ignore = ":disabled";
  36.         return form.valid();
  37.     },
  38.     onFinished: function (event, currentIndex)
  39.     {
  40.         alert("Submitted!");
  41.     }
  42. });
  43. </script>

I want a tooltip to appear whenever there is input.error not just on hover, all time if document have input.error like in that example: http://jqueryui.com/tooltip/#forms after click "Show help" button.