From last few days, I am getting addicted to CSS3 and Its awesomeness. Practically it will save lots of typing and brain damage of a developer. From last 2 hour, I was trying to do something with what i’ve learned about css3 these days.

What is a Tooltip?

A tooltip is basically a suggestion or Hint text, That will tell you what is behind a link or a text. The best example a facebook comment link, Take a look,

As you can see, Someone liked a Comment, And When you mouse over the like count, you can see who liked it.

Lets Do it

First, Lets do some HTML

 

Now the Code above is very simple. If you know HTML, You already know what i wrote up there. A Question might come up about the <span> Tag, I will Explain it later.

Now Here

This class is a real important deal. It will do the rest.

Time to do some CSS.

And Its done, Here is a Working Demo, [ Direct link ]

Note: As the Browser Show Any title added with a Tag automatically, We need to remove the main title in order to make the tooltip visible enough. the <span> Tag contain a title attribute which will shown by the browser when some one mouse over the link. Safe and Secure