css tooltip positioning

[nihalz]

hi
i have been looking for a pure css tooltip, and came across this one:

http://psacake.com/web/jl.asp

its exactly what i want, but i don't know how to position the tooltip properly...
i want it to appear on the bottom-left side of the link, like this:

[---------------blank-----------][LINK]
[------------TOOLTIP-------------]

can someone please tell me how to position the tooltip like above??
thanks a lot!

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:#cff; color:#000;
text-align: center}

[Veronica]

You would adjust it in the css for the hover state, for example, I set left to -15em and top to 1em and it displays just below and to the left. Just make sure your page is set up so that there will be room for the hover span to display, or it will wind up off the page.



a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:1em; left:-15em; width:15em; /*adjust here to change position*/
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center}

[nihalz]

sweet... thanks for the help!