ASP.NET与C#中验证后控制Tooltip显隐的问题求助

问题场景 #

点击「Next」按钮时，文本框未输入10位数字的情况下，Tooltip能正常显示错误提示；但验证通过后，鼠标悬停文本框仍会弹出错误Tooltip。需求是仅在点击按钮且验证不通过时显示Tooltip，验证通过或后续输入符合要求时隐藏。

代码问题点 #

1. Tooltip默认触发逻辑未禁用：Bootstrap Tooltip默认通过hover/focus触发显示，你在HTML中提前绑定了data-toggle="tooltip"，导致无论验证状态如何，鼠标悬停都会触发Tooltip。
2. 验证通过时未正确处理Tooltip：代码中注释掉了验证通过后的hide操作，且没有清除Tooltip的触发条件，导致后续悬停仍会显示。
3. 缺少输入过程中的状态同步：用户在验证不通过后输入正确内容时，Tooltip不会自动隐藏，体验不佳。

修复方案及完整代码 #

核心思路 #

• 手动初始化Tooltip，设置触发方式为manual（完全由代码控制显示/隐藏），禁用默认的hover/focus触发。
• 按钮点击时严格验证输入，根据结果控制Tooltip的显示/隐藏。
• 监听文本框输入事件，实时同步Tooltip状态。

<%@ 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 () {
            // 手动初始化Tooltip，设置触发方式为manual，禁用默认hover/focus触发
            $(".txtmobilenmbr").tooltip({
                trigger: 'manual',
                placement: 'bottom',
                title: 'Please Enter Mobile Number'
            });

            $(".SignupNextBtn").click(function () {
                var vals = $(".txtmobilenmbr").val().trim();
                // 验证：空值、长度非10位、非数字都判定为不通过
                if (vals === '' || vals.length !== 10 || isNaN(vals)) {
                    $(".txtmobilenmbr").tooltip("show");
                } else {
                    $(".txtmobilenmbr").tooltip("hide");
                }
                return false;
            });

            // 监听文本框输入，输入符合要求时自动隐藏Tooltip
            $(".txtmobilenmbr").on('input', function() {
                var vals = $(this).val().trim();
                if (vals.length === 10 && !isNaN(vals)) {
                    $(this).tooltip("hide");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="txtMobile" runat="server" MaxLength="10" CssClass="text-inputbox txtmobilenmbr" autocomplete="off"
                placeholder="Your 10 digit mobile number"></asp:TextBox>

            <asp:Button ID="mobnxtbtnid" Text="Next" CssClass="btn btn-primary SignupNextBtn" runat="server" />
        </div>
    </form>
</body>
</html>

修改细节说明 #

• 移除了HTML中文本框的data-toggle="tooltip"、data-placement、data-original-title属性，改为JS初始化时配置，避免默认触发逻辑。
• 设置trigger: 'manual'，让Tooltip只能通过tooltip("show")/tooltip("hide")控制显示隐藏。
• 完善验证逻辑：增加isNaN(vals)判断确保输入为数字，避免非数字内容被误判为有效输入。
• 添加输入监听事件，用户输入过程中只要内容符合要求，就自动隐藏Tooltip，提升交互体验。

内容的提问来源于stack exchange，提问作者Kumar