How to hide tooltip after validation in ASP.NET and C#-CodePudding

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.

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).

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:

<%@ 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/

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.

CodePudding user response：

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.

For ex: On click/keyup/keydown (txtMobile)

$('[data-toggle="tooltip"]').tooltip("hide");

Like you have done on the button submit.

CodePudding user response：

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"); and $('[data-toggle="tooltip"]').tooltip("hide"); I used attr method $("#txtMobile").attr("data-original-title","Please Enter Mobile Number").tooltip("show"); and $("#txtMobile").attr("data-original-title","").tooltip("hide");