The Art of Tooltips

Creating amazing tooltips using CSS3

What is a tooltip?

Also referred to as a ScreenTip, basically it is a message that appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface.

You can show a message on TOP POSITIONThis is a top position tooltip!, LEFT POSITIONThis is a left position tooltip!, RIGHT POSITIONThis is a right position tooltip! and BOTTOM POSITIONThis is a bottom position tooltip! using tooltip.

You can also customize its color to GREENThis is a fantastic green tooltip!, REDThis is a bloody red tooltip!, or BLUEThis is an amazing blue tooltip!.

As a matter of fact you can also add some cool effects like FADING Plain Fading effect animation! and SLIDINGWonderful sliding effects! Nice!

The tooltip is not just limited with just plain words, you can also put IMAGES on your tooltips.

Did you know that the tooltip came from older Microsoft applications like Microsoft Word? This had a toolbar where moving the mouse over the buttons displayed these tooltips.

Tooltips are great and the good thing is they can be easily done using CSS3 alone.