JQuery UI Tooltip Widgets
In this article, we will see How to create jquery UI tooltip widgets Step by step.
What are tooltip widgets?
It extends the functionality of the title attribute available in HTML. The tooltip widget helps us to create a theme-able and customizable tooltip control. Tooltips are used to show some additional information about an element to the user.
How to create a tooltip widget
1. Create a new HTML document with .html extension. Then write a basic HTML structure and link the jquery UI files.
2. To create a tooltip widget; we can create any HMTL element with a title attribute.
<div title="You hoverd on me" id="tooltip">
Mouse over on me
</div>3. Select the element using the jQuery selector, then call the tooltip jQuery UI function on it.
<script type="text/javascript">
$("#tooltip").tooltip();
</script>Code:
<html>
<head>
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<div title="You hoverd on me" id="tooltip">
Mouse over on me
</div>
<script type="text/javascript">
$("#tooltip").tootip();
</script>
</body>
</html>Output:
See the above output, When I hover the text, the text we have given in the title is displayed.