Share on Google+Share on Google+

jQuery tooltip

Ads
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;

border:1px solid #333;

background:#f7f5d1;

padding:2px 5px;

color:#333;

display:none;

} 

</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>

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>

<body>

<h1>jQuery Tooltip</h1>

<p><a href="#" class="tooltip" title="This is the tooltip">Roll over curser</a></p>

</body>

</html>

After using the following steps the tooltip will displayed.

online demo: Auto complete Example

Advertisements

Posted on: December 2, 2009 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Ads

Advertisement