Tekikon

I got this trick from Jai. He makes a post that teach us how to create tooltips purely using Cascading Style Sheets(CSS).

But, what is tooltips? From Jai's post I quote

Tooltips are basically little blocks of information that are used to inform users about certain attributes of your website elements.

Not like other tooltips that created using a help of javascript or some other programming languages, this tooltips is purely using css which is also meaning easy to create and can be loaded quickly without any delay.

Now, follow this step :

1. Make a blank HTML file and paste the following text in the BODY part :

<a href="#" class="tooltip"><span>
This is a pure CSS tooltip!</span>Tooltip 1</a>

This is the HTML part where we create a hyperlink with the text Tooltip1. In the next step, we are going to hide the text within the span tags which will serve as the tooltip text.


2. Now post this CSS information in your HEAD part of the HTML file


.tooltip { position:relative; z-index:24; }
.tooltip span { display:none;}
.tooltip:hover {z-index:25;}
.tooltip:hover span {
display:block;
position:absolute;
width:120px;
top:25px;
left:20px;
background-color:#FCFBDC;
border:1px solid #333333;
padding:5px;
font-size:11px;
color:#333333;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;}



How its work?

The property display:none is given to the span tag inside the hyperlink. This will make the text inside the span tag invisible and display:block property on tag hover make it back visible when a mouse hovering the link.

The positioning of the .tooltip span class is relative because we will place the tooltip text relative to the hyperlink area and make the span tag absolute by defining its fixed position.

The z-index is used so that tooltips are in the front of the hyperlink and do not overlap. The more the value of z-index, the farther in the front goes the element.

We can adopt these tooltips trick to our blogger template easily. Just copy the CSS and put it before ]]></b:skin>, save your template and finish.

Every time we want to put a tooltip on our link, just use a similar code like below,

<a href="#" class="tooltip"><span>
This is a pure CSS tooltip!</span>Tooltip 1</a>

Styling also can be altered according to our own choice. Me, successfully integrate this tooltip for my tab menu and i also use an images inside the tooltip boxes.

Sound interesting right? Why not try it and share your experience by make a comment on this post?