Jquery plugins allow us more features on tooltip. I read this article which i think is very useful when we need to have a tooptip which pop out and kept visible until we click on next tooltip. We need more controls on the tooltip or we can sticked the tooltip by clicking some keys on the keyboard. Here I have tried to put the pictures and texts on the tooltips or sticky tooltips. The sticky tooltips are very useful showing the information about places, country,animals or the description with the pictures etc.
Steps 1.
Copy and paste the following codes in the head section of your page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="stickytooltip.js"></script> <link rel="stylesheet" type="text/css" href="stickytooltip.css" />
Steps 2.
Download the following two files and save it in the same folder which contains the source code.
Steps 3.
Now you need to write the code in the body section of your page . There are two parts of this section
first is to create the link for the images and text where you want to put the tooltip .
For example :
<p><a href="http://wprocker.com/" data-tooltip="sticky1">Wordpress rocker</a></p> <p><a color="#ffffff" data-tooltip="sticky2">Prison break</a></p> <p><img src="http://www.designgala.com/demos/stick/everestth.jpg" data-tooltip="sticky3" /></p>
and secondly you need to write the code for the contents of tooltips .For this you need to defined all the tooltip under a single DIV,with each DIV itself wrapped around a DIV with a unique ID attribute
For example:
<!--HTML for the tooltips--> <div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px"> <div id="sticky1" class="atip" style="width:240px"> <img src="http://www.designgala.com/demos/stick/therock.jpg" /><br /> This the best site to get news and tutorials for wordpress ...it will rock you whenever ,whereever you are . </div> <div id="sticky2" class="atip" style="width:235px"> <img src="http://www.designgala.com/demos/stick/ho1.jpg" /><br />Prison break ,one of the most popular television serial and holy was one of the actor. </div> <div id="sticky3" class="atip" style="width:240px"> <img src="http://www.designgala.com/demos/stick/everest 1.jpg" /><br />Mount Everest is the highest peak in the world and its in <b><a href="http://www.newsmandu.com" target=" ">Nepal</a></b> . </div> </div> <div class="stickystatus"></div> </div>
Click here to see the Demo.
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
