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*/
<script type="text/javascript" src="htmltooltip.js">
* Inline HTML Tooltip script- by JavaScript Kit (
* This notice must stay intact for usage
* Visit JavaScript Kit at for this script and 100s more

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="" rel="htmltooltip">Global warming</a> is one of the most hot topic in the news and reviews. There are various <a href="" rel="htmltooltip">Conspiracy theories</a> on global warming. The effect of global warming are clearly being seen in the country like <a href="" 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 replys to 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 *