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

【问题标题】：jQuery Form Validator with tooltip带有工具提示的 jQuery 表单验证器
【发布时间】：2018-05-17 09:29:52
【问题描述】：

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

因此，我试图关注这个线程How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?，他们在其中给出了jsfiddle link 来实现我想要遵循的相同目标。

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

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

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

谢谢

【问题讨论】：

它对我有用。但我认为您可能忘记添加propper css 以使其看起来像一个工具提示，现在它只是输入后的一条消息。
当我点击验证消息You have not given a correct e-mail address aears，因此验证工作并显示工具提示。（只是它看起来不像弹出工具提示，但那只是一些带有悬停效果的 CSS）。
在 chrome 浏览器中是这样的。

标签： javascript jquery jquery-form-validator

【解决方案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">，以便它可以掩盖我的工具提示。

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

谢谢

【讨论】：