CSS3 Tooltip – The Easy way

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,

facebook_like_tooltip

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 :D

Bangla @font-face and Aftermath

About a Year ago, I had a idea, Making a service like Google Web fonts for Bangla. So that no one have to worry about whether the visitor have a bangla font or not. That idea is still inside my head, But before that, A proper discussion About bangla font on web was needed.

What is @font-face?

In a simple word, its the best way to embed a font in your webpage, that will let the visitor view your site with your preferred font. From a simple IDEA, it become the most viral technology about web font. And it hit the top when mighty google comes with Google Web fonts which basically build on @font-face.

Continue reading