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
1 |
<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.
Now Here
1 |
class="ttip" |
This class is a real important deal. It will do the rest.
Time to do some CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.ttip{ display: inline; position: relative; } .ttip:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 4px; bottom: 26px; color: #CA2829; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; } .ttip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; } |
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