Posts Tagged ‘Tooltips’
Pure CSS Tooltips
Written by Jai on September 1, 2008 – 2:49 pm - 7,931 views
Today I’ll teach you how top create tooltips purely using Cascading Style Sheets(CSS). Tooltips are basically little blocks of information that are used to inform users about certain attributes of your website elements. This is a tooltip example!Click on this link to see how a tooltip looks like.
Most tooltips are created with the help of javascript or some other programming languages. This can be cumbersome because not everyone wants to learn Javascript. But CSS tooltips are easy to create and can be loaded quickly without any delay.
Here is what you have to do:-
1. Make a blank HTML file and paste the following text in the BODY part :-
<a href="#" class="tooltip"><span>This is a pure CSS tooltip!</span>Tooltip 1</a>
This is the HTML part where we create a hyperlink with the text Tooltip1. In the next step, we are going to hide the text within the span tags which will serve as the tooltip text.
Read more
If you enjoyed this post, make sure you subscribe to my RSS feed!
