Some more tips on tooltip

show (Small)
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.

5 Comments Some more tips on tooltip

  1. Pingback: Design Gala

  2. Pingback: rabi

  3. Pingback: Topsy.com

  4. Pingback: Design Gala

  5. 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>