Tooltips on web pages
Posted on Tuesday, July 17, 2007 at 12:37 PM
Tooltips on web pages ? Whatever would I use those for ? Well, they are a very good way of temporarily displaying information without it cluttering up the page on a permanent basis. But how on earth would I do it ? Recently I was browsing the CSSplay web site, and I came across a very simple, elegant way. However, as with most of the CSSplay examples, there is very little in the way of explanation as to how to implement it, merely an example page (which is situated here). So here is a little bit of help on how to produce tolltips using purely CSS.
First of all a little example. Place your mouse over this linkThis is the tooltip.. Voila. A lovely little tooltip that disappears when the mouse moves away. So what is needed to work this little piece of magic ? First of all a simple style sheet in the <HEAD> section of your web page or your default CSS file if you prefer. The code for this follows. Simply copy and paste the following purple text.
<style type="text/css">
a.tooltip
{color:#c00;}
a.tooltip b {display:none;}
a.tooltip:hover
{border:0; position:relative; z-index:500; text-decoration:none;}
a.tooltip:hover
b {display:block; position:absolute; top:20px; left:-25px; padding:5px;
font-weight:normal; color:#000; border:1px solid #888; background:#ffc;
width:150px;}
a.tooltip:hover b em {position:absolute; left:20px;
top:-6px; width:11px; height:6px; background:#fff url(tooltip.gif) 0 0;
display:block; font-size:1px;}
</style>
How to display the tooltip ? Here is the HTML code that I used in the above example. Place your mouse over <a class="tooltip" href="#">this link<b>This is the tooltip.</b></a>.
Right. Now here is a little variation which make the box of the tooltip a little bit more appealing. We shall use a small "carat" graphic (available HERE - click the link, download and upload to your web server, changing the CSS URL to point to it) and a couple of changes to the HTML code. AFTER the <b> add <em></em>. I know this appears to be a little strange but yes, you do put these two tags together with NOTHING in between ! See this example. Place your mouse over this linkThis is another tooltip. Note the top "carat" graphic..
HAVE FUN !
Technorati Tags: gbtamc, tooltip, tooltips
