Pure css tooltip

» 17 July 2008 » In Css Articles »

To save both space and frustration, it is often wise to use css tooltips to show a small popup with some helping words to the readers of your webpage. It’s very easy to make, looks great, and you keep your readers from dissapearing from your site.

How to make the css tooltip:

You have to put the tooltip text inside the span attributes. The html look like this:

?View Code HTML4STRICT 
This is just some text, and if you <a href="#">Roll your mouse over here <span>Then this text will show as a pure css tooltip</span></a> which is pretty neat!

And the css looks like this:

?View Code CSS 
a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}

So now you know an easy way to show really nice and helpful tips to your users, with the help of only pure css tooltip. Good luck!

Tags: , css tooltip, , tooltip

Trackback URL

2 Comments on "Pure css tooltip"

    Trackbacks

    1. Bookmarks about Tooltip 19/12/2008 at 3:15 pm

      [...] - bookmarked by 6 members originally found by Yurikko on 2008-11-15 Pure css tooltip https://csstemplatesweb.com/2008/07/17/pure-css-tooltip/ - bookmarked …

    2. Camillas första hemsida» Blog Archive » Tooltips hela dagen 21/05/2009 at 2:24 pm

      [...] https://csstemplatesweb.com/css-articles/pure-css-tooltip/ [...]

    You must be logged in to post a comment.