Objectives and outcomes

In this tutorial we are going to learn about tooltip widget in jquerUI. Tooltip widget is used to provide users with some hint regarding the associated form or some link. Example for the same is shown below:



hover on below form elements to see the effect





Link with a tooltip!!



HTML code:

<html>
<head>
<title>jQuery UI Tooltip functionality</title>
<link href="jquery-ui.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
<body>
<form>
<label for="name">Phone no:</label>
<input id="tool1" title="Enter Your phone number in xxx-xxx-xxxx format.">
<p><a id="tool2" href="#" title="tooltip can also be used on links.">
<b>Link with a tooltip!!</b>
</a></p>
</form>
</body>
</html>


Javascript

<script>
$(function() {
$("#tool1").tooltip();
$("#tool2").tooltip();
});
</script>


Tooltip widget is very simple to use just by calling tooltip function with the associated html element