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

It's working for me. but i think you probably forgot to add the propper css to make it look like a tooltip now its just a message after the input. — Joel Harkes, May 17 '18 at 09:33
when i click validate the message `You have not given a correct e-mail address` apears, thus the validation works and it shows the tooltip. (only it doesn't look like a popup tooltip, but thats just some css with a hover effect). — Joel Harkes, May 17 '18 at 09:40

score 0 · Accepted Answer · answered May 18 '18 at 12:15

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

jQuery Form Validator with tooltip

1 Answers1