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
<a href="#" title="I am Oritro" class="ttip"><span title="Reveal">Who i am?</span></a>
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.
This class is a real important deal. It will do the rest.
Time to do some CSS.
padding: 5px 15px;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
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