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
- <style>
- .wizard > .content > .body input
- {
- width: 180px;
- display: inline-block;
- }
- .wizard > .content > .body label.error {
- display: none !important;
- background: #fbe3e4;
- border: 1px solid #fbc2c4;
- color: #8a1f11;
- }
- .wizard > .content > .body label
- {
- width: 150px;
- text-align: right;
- display: inline-block;
- }
- label.error{
- display: none !important;
- }
- </style>
html
- <form id="new_employ_form" action="#">
- <div>
- <h3>Dane personalne</h3>
- <section>
- <p>(*)Pola wymagane</p>
- <label for="imie">Imie: *</label>
- <input id="imie" name="imie" type="text" class="required">
- <label for="nazwisko">Nazwisko: *</label>
- <input id="nazwisko" name="nazwisko" type="text" class="required">
- <label for="telefon_stac">Telefon stacjonarny:</label>
- <input id="telefon_stac" name="telefon_stac" type="text">
- <br />
- <label for="telefon_kom">Telefon komórkowy:</label>
- <input id="telefon_kom" name="telefon_kom" type="text">
- </section>
- <h3>x</h3>
- <section>
- </section>
- <h3>x</h3>
- <section>
- </section>
- <h3>x</h3>
- <section>
- </section>
- </div>
- </form>
js
- <script>
- var form = $("#new_employ_form");
- form.children("div").steps({
- headerTag: "h3",
- bodyTag: "section",
- transitionEffect: "slideLeft",
- onStepChanging: function (event, currentIndex, newIndex)
- {
- form.validate().settings.ignore = ":disabled,:hidden";
- var k=form.valid();
- if(!k)
- {
- $(function () {
- var tooltips = $(document).tooltip({
- items: "input",
- position: {
- my: "center bottom",
- at: "center top-5"
- },
- content: function () {
- var element = $(this);
- if (element.hasClass("error")) {
- if (element.hasClass("required"))
- return "Fill it!";
- }
- }
- });
- $(document).tooltip("open");
- });
- }
- return k;
- },
- onFinishing: function (event, currentIndex)
- {
- form.validate().settings.ignore = ":disabled";
- return form.valid();
- },
- onFinished: function (event, currentIndex)
- {
- alert("Submitted!");
- }
- });
- </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.