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

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>