What are Tooltips ?
Tooltips are the contents you see in a small box when you roll over a hyper link .for example :
ROLLOVER TO SEE TOOLTIPS
But it is not a stylish one.Lets add some impressive styles to the tooltips .After you finish implementing this tutorial here is what you will see :
Roll over for tooltip
If you dont the font colour to be green within the tooltip dont worry its fully customizable within seconds .Before i continue with this tutorial i want to thank Alen Grakalic (http://cssglobe.com) for the script used for the tool tip.Thanks Alen.
Creating Tooltips in blogger :
STEP 1 :
go to blogger –> edit html
add the below 2 lines in the html [ below the <head> tag ] :
<script src='http://h1.ripway.com/itcoll/blogger%20tooltips/jquery.js'/>
<script src='http://h1.ripway.com/itcoll/blogger%20tooltips/main.js'/>
screenshot :
Step 2:
add the below lines now in the html code :
#tooltip{
position:absolute;
border:3px solid #333;
background:#f7f5d1;
padding:2px 5px;
display:none;
font-style:italic;
font-size:large ;
color:green; }
screenshot :
you have to add it below the <style> tag as shown in the screenshot .
STEP3 - final step :
Whenever you want to add a tooltip in your blog post , you just have to add two things in the html page.It will just take 20 seconds – very effective in giving your readers valuable information .So dont be lazy in implementing this guys.
so lets say i want to tell my readers the definition of “blog” with in my blog post.So instead of directing them to a wikipedia article and making them crazy , i will let them know what it is , in simple sentences without loading any other foreign site .here is how you should do it :
<a href=”#” class=”tooltip” title=”blogging is blah blah blah …”>WHAT IS A BLOG ? </a>
ADD THE ABOVE CODE IN THE BLOG POST WHENEVER YOU NEED TOOLTIPS .just remember the these things :
1.class=”tooltip”
2.title=” /* JUST TYPE ANYTHING WHATEVER YOU WANT TO SHOW YOUR READER WITHIN THE TOOL TIP*/ ”
3.remember to change the anchor text – (i.e) change “what is a blog ?” in the code to whatever you want as a link .
CUSTOMIZING THE TOOLTIPS :
#tooltip{
position:absolute;
border:3px solid #333;
background:#f7f5d1;
padding:2px 5px;
display:none;
font-style:italic;
font-size:large ;
color:green; }
you can change the font-size ,font style to your desire by changing the code above.If you want the font colour to be yellow instead of green , just change tis line in the above code :
CHANGE : color:green;
TO
color:yellow;
hope the tutorial was nicely explained.Pls give me your comments and tell me if you had any trouble implementing it .
It is also possible to show images and snapshots of a URL in the tooltip boxes.I will cover those topics soon .Take care pals .
