jQuery Form Validator with tooltip

Question

I have used this jQuery Form Validator and I am trying to implement a tooltip as an error message instead of the simple span tag message.

Hence I am trying to follow this thread How to display messages from jQuery Validate plugin inside of Tooltipster tooltips? in which they have given a jsfiddle link to achieve the same which I m trying to follow.

Here is my jsfiddle what I have tried so far.

I am unable to put the same code in my question here, because question has reached maximum characters limit. Hence I have create jsfiddle for the same.

Can someone guide me why its not working ? What should I do from here on to achieve the same.

Thanks

Answer 1

Ok Guys,

Here what I have done to achieve this.

<style>
/* Tooltip container */
.tooltipPopup {
    /*position: relative; */
  /*  display: inline-block;*/
 /*   border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ */
}

/* Tooltip text */
.tooltipPopup .tooltiptextPopup {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: white;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipPopup:hover  .tooltiptextPopup{
    visibility: visible;
}



</style>
<form action="" id="myform" >
  <p class="tooltipPopup">
    E-mail
    <input name="email" data-validation="email" >
    <!-- <input name="email" data-validation="email" data-validation-error-msg-container='item-price-error-dialog' >
    <span id="item-price-error-dialog"></span> -->



  </p>

  <p>
    <input value="Validate" type="submit">
    <input value="Reset form" type="reset">
  </p>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

<script>


    // initialize validate plugin on the form
    $.validate({
       // errorElementClass:'tooltip',
        errorMessageClass:'tooltiptextPopup'
    });

</script>

Here, I set errorMessageClass to tooltiptextPopup and <p class="tooltipPopup"> so that it can cover up my tooltip.

Hope this helps to someone who stuck in same situation and wanting to implement the same without any third party library inclusion.

Thanks