question

AshokKumar-9369 avatar image
0 Votes"
AshokKumar-9369 asked LanHuang-MSFT commented

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

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][1]



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

dotnet-aspnet-generaloffice-js-dev
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @AshokKumar-9369,
May I know if your issue is resolved? Please feel free to let me know if there is anything that I can help here.
Best regards,
Lan Huang

0 Votes 0 ·
Bruce-SqlWork avatar image
0 Votes"
Bruce-SqlWork answered AshokKumar-9369 commented

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


· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @Bruce-SqlWork Thanks for your comment and I have changed as per your answer like this in content page (aspx)


<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" title="Please Enter Mobile Number" onkeypress="phoneno()"></asp:TextBox>

and in jquery $('[data-toggle="tooltip"]').tooltip("show"); I used this property and initially it is working fine and next, if I place the mouse on textbox still the error message is showing but it should not happen

can you suggest me with sample code that would give more help to me.

thanks in advance.





0 Votes 0 ·
LanHuang-MSFT avatar image
0 Votes"
LanHuang-MSFT answered LanHuang-MSFT commented

Hi @AshokKumar-9369,
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.



image.png (20.2 KiB)
image.png (123.7 KiB)
13.gif (119.4 KiB)
· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @LanHuang-MSFT thanks for your answer post but in my scenario I add the aspx page to masterpage and I have tried your given solution it is not working fine to me.

I have used these scrips as per your answer post
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="assets/vendor/bootstrap/js/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>

Can your please give me the updated solution on masterpage concept .


that would be the great help to me.

Tanks for your patience with me.

0 Votes 0 ·

Hi @AshokKumar-9369,
This does not affect work on the master page. I tried your bootstrap.min.js file but it didn't work.
Don't you have a js file in your solution project (marked red in my picture)? You can drag and drop directly to the page.
If not, you can try this <scr ipt src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></scr ipt>.
Best regards,
Lan Huang

0 Votes 0 ·

Hi @LanHuang-MSFT I have created a small project and used as per your comment nothing is happening (means : error message is not coming)


Please check the below image

265210-image.png



why it is happening ? am I used any wrong scripts ?

Please suggest me

Note :- If possible please give those (physical links) script links, where you are used in header session.

Thanks in advance.
Hope you help.




0 Votes 0 ·
image.png (97.8 KiB)
Show more comments