In this example sixrevisions.com will show us how to build a pure CSS3 tooltip mechanism that is aesthetically enhanced using CSS3. To be more specific, this means that it will work only on browsers that support CSS3. The concept is known as progressive enhancement. The effects, color, fonts and everything you give to your tooltip may differ depending on the end user’s machine ( such as their browser, installed fonts, monitor contrast, etc )
Using the simple CSS3 extras like the border-radius property or the box-shadow property, will give what used to be a generic-looking popup a new and more sophisticated visual appearance.
Under the Hood
As always, it makes sense to get some basic code down in your chosen source code editor and we shall begin with the HTML source code for our examples.
Different Types of Tooltips
For giving you enough ideas to build upon, we will provide 5 different tooltips. Each will look very similar in order to maintain a standardized appearance, but you are free to experiment further and continue evolving the techniques….. Read the full article here where you’ll get the full HTML code and other things you need to create the tooltip.
Read the full article with examples and more!