带有工具提示的jQuery Form Validator

Question

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

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

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

我无法在这里的问题中输入相同的代码，因为问题已达到最大字符数限制。因此，我为相同的创建了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">，以便它可以掩盖我的工具提示。

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

谢谢