Simple tooltip using jquery

tool tip using jQueryThe 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

4 Comments Simple tooltip using jquery

  1. Pingback: Design Gala

  2. Pingback: WordPress Rocker

  3. Pingback: WordPress Rocker

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>