The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small “hover box” with information about the item being hovered over.
There are some few steps to be followed to use tooltip in webpage.
Step 1:
First of all you have to insert the given code into the head section of the html code.
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<style type="text/css"> div.htmltooltip { position: absolute; /*leave this and next 3 values alone*/ z-index: 1000; left: -1000px; top: -1000px; background: green; border: 10px solid red; color: white; padding: 3px; width: 250px; /*width of tooltip*/ } </style>
<script type="text/javascript" src="htmltooltip.js"> /*********************************************** * Inline HTML Tooltip script- by JavaScript Kit (http://www.javascriptkit.com) * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/ </script>
Step 2:
Download the following two files and save it in the same folder which contains the html code.
Step 3:
To add tooltip to any link on webpage, just give the link a rel=”htmltooltip” declaration, then define the tooltip DIV itself anywhere on the page with class=”htmltooltip”.
To see an example:
ADD the following codes into the body section of your html code.
<p align="left">"<a href="http://en.wikipedia.org/wiki/Global_warming" rel="htmltooltip">Global warming</a> is one of the most hot topic in the news and reviews. There are various <a href="http://en.wikipedia.org/wiki/Global_warming_conspiracy" rel="htmltooltip">Conspiracy theories</a> on global warming. The effect of global warming are clearly being seen in the country like <a href="http://en.wikipedia.org/wiki/Nepal" rel="htmltooltip">Nepal</a> where glaciers are constantly melting and size is constantly decreasing. The message is very clear that some day ,there will be no snow at all. </p> <!--Inline HTML Tooltips (DIV with class="htmltooltip"--> <!--Matched up with anchor links with rel="htmltooltip" and in the order they appear within page's source--> <div class="htmltooltip">Global warming is the increase in the average temperature of the Earth's near-surface air and oceans since the mid-20th century and its projected continuation.</div> <div class="htmltooltip">The Greenhouse Conspiracy , It is one of the earliest instances of the suggestion of a conspiracy to promote false claims supporting global warming.</div> <div class="htmltooltip">Nepal is officially the Federal Democratic Republic of Nepal, is a landlocked country in South Asia and the world's youngest republic.</div>
Click here to see example
Web Designer
March 1, 2011
Hi,,
Please provide the htmltooltip.js file. i am unable to download js files using the provide link..