jQuery tooltip
A tooltip is help box or text that appears when you rollover your cursor over something. The title attribute of a hyperlink or alt attribute of an image tag will be displayed as a tooltip by a browser when you rollover your cursor over them. These are useful attributes. They should be added to every image and hyperlink.
A tooltip is help box or text that appears when you rollover your cursor over something. The title attribute of a hyperlink or alt attribute of an image tag will be displayed as a tooltip by a browser when you rollover your cursor over them. These are useful attributes. They should be added to every image and hyperlink.What is tooltip ?
A tooltip is help box or text that appears when you rollover your cursor over something. The title attribute of a hyperlink or alt attribute of an image tag will be displayed as a tooltip by a browser when you rollover your cursor over them. These are useful attributes. They should be added to every image and hyperlink.
Getting Started with jquery tooltip:
In this example there are the following steps which are used to make jQuery tooltip.
Step 1: In the first step we make css to create the tooltip background, height, width and other things
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
#tooltip{
position:absolute;
0border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
1color:#333;
display:none;
}
2</style>.
Step 2: In the second step we make the connection with jquery plugins which are jquery.js and main.js.
<script src="../plugin/jquery.js" type="text/javascript"></script>
<script src="../plugin/main.js" type="text/javascript"></script>3
Step 3: In the last step we will make the HTML part , the HTML required on the front end for this tooltip is very simple. Simply add an class and title tag with a descriptive title attribute. This title will display when you take mouse over the text.
<html>
</head>
4<body>
<h1>jQuery Tooltip</h1>
<p><a href="#" class="tooltip" title="This is the tooltip">Roll over curser</a></p>
5</body>
</html>
After using the following steps the tooltip will displayed.
