0

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

因此，我正在尝试关注此线程如何在 Tooltipster 工具提示中显示来自 jQuery Validate 插件的消息？他们在其中提供了一个jsfiddle 链接 以实现我试图遵循的相同目标。

这是我迄今为止尝试过的jsfiddle 。

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

有人可以指导我为什么它不起作用吗？从这里开始我应该怎么做才能达到同样的效果。

谢谢

4

1 回答 1

0

好了朋友们，

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

<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为tooltiptextPopupand<p class="tooltipPopup">以便它可以掩盖我的工具提示。

希望这对陷入相同情况并希望在不包含任何第三方库的情况下实现相同的人有所帮助。

谢谢

于 2018-05-18T12:15:26.693 回答