Question

我已使用此jQuery Form Validator，我正在尝试将工具提示实现为错误消息，而不是简单的span标记消息。

因此，我试图遵循这个线程How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?，在这个帖子中jsfiddle link给出jsfiddle来实现我想要遵循的相同内容。

这是我迄今为止尝试过的tf.concat()。

我无法在此处提出相同的代码，因为问题已达到最大字符数限制。因此我为此创建了jsfiddle。

有人可以指导我为什么不工作？我应该从这里做些什么来实现同样的目标。

由于

Answer 1

好的伙计们，

这是我为实现这一目标所做的工作。

<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>

在此，我将errorMessageClass设置为tooltiptextPopup和<p class="tooltipPopup">，以便它可以掩盖我的工具提示。

希望这有助于那些陷入同样情况但希望在没有任何第三方库包含的情况下实现相同目标的人。

谢谢

带有工具提示的jQuery表单验证器

1 个答案: