Posted on: December 2, 2009 at 12:00 AM
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 ExampleIf you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
