How to show tooltip error message in asp.net codefile page using jquery

Ashok Kumar 201 Reputation points
2022-11-21T14:18:08.16+00:00

I want to show an error message using tooltip while we validating the textbox on button click event using jQuery in asp.net c#.

I have add an aspx page to master page and in master page after footer I used this script links for tooltip bootstrap

   <!-- Tooltip -->  
              <script src="https://unpkg.com/@popperjs/core@2"></script>  
               <%--<script src="https://unpkg.com/vue@next"></script>--%>  

And once I successfully add the aspx page to master I added the textbox and button controls to the aspx page

   <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" />  

 

And next I written the jQuery logic to achieve my requirement like below

   $(".SignupNextBtn").click(function () {  
     
           //alert('clicked');  
     
           var vals = $(".txtmobilenmbr").val();  
           vals = vals.toString();  
           //alert(vals);  
     
           if (vals == '' || vals.length < 10 ) {  
     
              //$('[rel="tooltip"]').tooltip();  
               //$("*[rel=tooltip]").tooltip();  
               //$('[data-toggle="tooltip"]').tooltip();  
               //$('[data-toggle="tooltip"]').tooltip("enable");  
               $('[data-toggle="tooltip"]').tooltip("show");  
               //$('[data-toggle="tooltip"]').tooltip();  
               //$('.txtmobilenmbr').tooltip({ title: "Hooray!", trigger: "click" });  
     
               //alert('hit');  
           }  
           else {  
   }  
            
     
           return false;  
     
       });  

Once I complete with my code I ran this page and didn't get the error message on textbox. And I used the tooltip() function but it is not working properly.

My output should be like this

Tooltip error message

I'm new to this kind of concepts.
Suggest me how to achieve this and where I did the mistake.

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,404 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
930 questions
{count} votes

2 answers

Sort by: Most helpful
  1. Bruce (SqlWork.com) 60,866 Reputation points
    2022-11-21T17:06:48.297+00:00

    when triggered tooltip() show the element's title as a popup. try adding a title attribute.


  2. Lan Huang-MSFT 28,826 Reputation points Microsoft Vendor
    2022-11-22T07:00:21.947+00:00

    Hi @Ashok Kumar ,
    I tested your code, you are using Bootstrap tooltip plugin, I think you need to use bootstrap.js.
    262903-image.png
    You can check out the code below.
    262869-image.png
    262808-13.gif

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.