WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Help with help icons

for

From: Carol Wheeler
Date: Feb 26, 2009 8:15AM

Perhaps a tooltip solution?

<quote>
Tooltip CSS

EX:
What is a tooltip? <a class=info href="#">This is a tooltip <span>an
aiding text that appears just when you roll on with the mouse</span></a>. The
basic idea comes from Eric Meyer's <a class=info
href="http://www.meyerweb.com/eric/css/edge/popups/demo.html"><b>pure css
popups</b><span>a very clever way to get dynamic effects on an html page without
using javascript.</span></a>


CODE:

<style>
a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#ff0; color:#000;
text-align: center}
</style>

</quote>

Carol E. Wheeler
<EMAIL REMOVED>
Web Department
American Institute for Cancer Research
1759 R Street NW
Washington DC 20009
Tel: 202-328-7744
Fax: 202-328-7226
http://www.aicr.org