How to hide tooltip after validation in asp.net c#

Question

How to hide tooltip after validation in asp.net c#

Ashok Kumar 221

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 match error is coming and when I hover on the textbox the tooltip error is showing but it should show only when we click on the next button (if condition not match error should show if condition match the error should hide)

And I have referred 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;  
               });  
     
               //$("#txtMobile").blur(function () {  
               //    //alert("dd");  
               //    if (!this.value.trim().length)  
               //        $(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" 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.

Suggest me where I did the mistake and how to achieve this.

Share via

How to hide tooltip after validation in asp.net c#

Your answer