Home Tutorial Ajax Jquery jQuery tooltip

 
 

Share on Google+Share on Google+
jQuery tooltip
Posted on: December 2, 2009 at 12:00 AM
Advertisement
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
Advertisement

Related Tags for jQuery tooltip :


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.

Posted on: December 2, 2009

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com