Menu ▼



Posted By :
avatarmrkraju
Total Views : 717

Show jQuery tooltip based on the textbox entered value

This example shows you how to show/hide the jQuery UI tooltip based on the given value in a textbox. In this example we have taken a textbox for age and when the user enter the age not in the range of 1 to 100 then it should show the tooltip.

Example
Enter Age:

Code to show the tooltip
$("#txtage").tooltip({
    items: "#txtage",
    content: "Age should be between 1 and 100."
});
$("#txtage").tooltip("open");

Code to hide the tooltip
$("#txtage").tooltip("disable");

Source code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            var agetooltip = null;
            $("#txtage").on("keyup", function () {
                if ($("#txtage").val() == "") {
                    if (agetooltip != null)
                        $("#txtage").tooltip("disable");
                }
                else {
                    var age = parseInt($("#txtage").val(), 10);
                    if (age >= 1 && age <= 100) {
                        if (agetooltip != null)
                            $("#txtage").tooltip("disable");
                    }
                    else {
                        if (agetooltip == null)
                            agetooltip = $("#txtage").tooltip({
                                items: "#txtage",
                                content: "Age should be between 1 and 100."
                            });
                        $("#txtage").tooltip("open");
                    }
                }
            });
        });
    </script>
</head>
<body>
    Enter Age:
    <input type="text" id="txtage" />
</body>
</html>





comments powered by Disqus


Search dotnetlearners.com