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.

What is tooltip ?

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;

0
border:1px solid #333;

background:#f7f5d1;

padding:2px 5px;

1
color:#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.

6 online demo: Auto complete Example

Ads