如何在 ASP.NET 和 C# 验证后隐藏工具提示
[英]How to hide tooltip after validation in ASP.NET and C#
问题描述
I'm using the tooltip for error showing so when we click on the next button, if the user not entered 10 digits in textbox then I'm showing the error message and it is working fine.
我正在使用工具提示来显示错误，所以当我们单击下一步按钮时，如果用户没有在文本框中输入 10 位数字，那么我将显示错误消息并且它工作正常。
But the issue is if the condition is not matched, error still occurs and when I hover on the textbox, the tooltip error is showing, but it should show only when we click on the button (if condition does not match, error should be shown, if condition matches, then the error should be hidden).但问题是如果条件不匹配，仍然会发生错误，当我在文本框上输入 hover 时，会显示工具提示错误，但它应该只在我们单击按钮时显示（如果条件不匹配，应该显示错误，如果条件匹配，则应该隐藏错误）。
I have referred to this example to understand the concept but my issue is different to this question.我已经参考了这个例子来理解这个概念，但我的问题与这个问题不同。
For the above my query, I have written this jQuery logic:对于上面的查询，我编写了这个 jQuery 逻辑：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tooltip.aspx.cs" Inherits="tooltip" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".SignupNextBtn").click(function () {
var vals = $(".txtmobilenmbr").val();
vals = vals.toString();
//alert(vals);
if (vals == '' || vals.length < 10) {
$('[data-toggle="tooltip"]').tooltip("show");
}
else {
//$('[data-toggle="tooltip"]').tooltip("hide")
}
//$("#txtMobile").hover(function () {
// $(this).removeAttr("data-original-title");
//});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtMobile" runat="server" MaxLength="10" CssClass="text-inputbox txtmobilenmbr" autocomplete="off" data-toggle="tooltip" data-placement="bottom"
placeholder="Your 10 digit mobile number" data-original-title="Please Enter Mobile Number"></asp:TextBox>
<asp:Button ID="mobnxtbtnid" Text="Next" CssClass="btn btn-primary SignupNextBtn" runat="server" />
</div>
</form>
</body>
</html>
The JsFiddle example is: https://jsfiddle.net/gtea65xw/5/ JsFiddle 的例子是： https://jsfiddle.net/gtea65xw/5/
I'm new to this tooltip concept and not sure where I did the mistake.我是这个工具提示概念的新手，不确定我在哪里做错了。
Please suggest what my mistake is, and how to fix it.请建议我的错误是什么，以及如何解决它。
2 个解决方案
解决方案1
0 2022-12-28 11:46:07
The Tooltip will automatically hide whenever you will click outside to that input box.只要您在该输入框外单击，工具提示就会自动隐藏。
However, as I can see on your jsfiddle code you can write your own js code to hide it.但是，正如我在您的 jsfiddle 代码中看到的那样，您可以编写自己的 js 代码来隐藏它。
For ex: On click/keyup/keydown (txtMobile)例如：点击/keyup/keydown (txtMobile)
$('[data-toggle="tooltip"]').tooltip("hide");
Like you have done on the button submit.就像您在提交按钮上所做的那样。
解决方案2
0 2022-12-29 08:20:58
I didn't find the exact solution on my issue.我没有找到关于我的问题的确切解决方案。
However, I have changed my logic and it is working fine to me.但是，我改变了我的逻辑，它对我来说工作正常。
That is, Instead of using $('[data-toggle="tooltip"]').tooltip("show");也就是说，而不是使用$('[data-toggle="tooltip"]').tooltip("show"); and $('[data-toggle="tooltip"]').tooltip("hide");和$('[data-toggle="tooltip"]').tooltip("hide"); I used attr method $("#txtMobile").attr("data-original-title","Please Enter Mobile Number").tooltip("show");我使用了attr方法$("#txtMobile").attr("data-original-title","Please Enter Mobile Number").tooltip("show"); and $("#txtMobile").attr("data-original-title","").tooltip("hide");和$("#txtMobile").attr("data-original-title","").tooltip("hide");
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.