CSS Tooltip Getting Cut Off in Browser Window

Hi,
I'm coding pure CSS tooltips using an XSL transformation. Each definition is stored in a hidden span when the page loads and displayed when you mouseover specific words. The problem I'm having is that long tooltips are getting cut off at the bottom of the browser window.

Does anyone know how to fix this? I'd like the tooltip to "float" up above the bottom of the browser window. I'm trying to avoid using JavaScript, but I am open to using JavaScript within the CSS if necessary. Thanks!

HTML:
<a href="#" class="tooltip">accident<span>A sudden unexpected event, identifiable in time and place. In some policies, accident means the same as occurrence.</span></a>

CSS:
a.tooltip, a.tooltip:visited {z-index:24;color:#336666;position:relative;border-bottom:1px dashed #336666;text-decoration:none;}
a.tooltip:link, a.tooltip:hover, a.tooltip:active {z-index:25;color:#336666;border-bottom:1px dashed #336666;text-decoration:none;cursor:help;}
a.tooltip span {display:none;}
a.tooltip:hover span {position:absolute;top:2em;left:0em;border:1px solid #F0D070;padding:3px;display:block;width:245px;color:#D0A010; background-color:#FFFFE4;font-weight:normal;}

I don't think you can do that with pure CSS, Javascript is probably necessary.

If you don't want to have external JS, you may be able to put JS within your CSS to do that sort of thing, look here (http://namb.la/popular/tech.html) for information on how to do that.

Hello Probey20,
It's working fine when you place Accidents up higher. The span is appearing exactly where you've told it to. To move it around, play with the settings I've highlighted in red below:
a.tooltip:hover span {position:absolute;top:2em;left:0em;border:1px solid #F0D070;padding:3px;display:block;width:245px;color:#D0A010; background-color:#FFFFE4;font-weight:normal;}

Excavator,
Our pages are dynamically generated through a content management program, so we never know where the tooltips are going to appear on a page. We want them to display below each word, unless we hit the bottom of the browser window, in which case we want them to bump up so they are fully visible. Is this possible?

Thanks!

I don't think span can do it because you are absolutely positioning where the span is placed. Have you messed around with that at all, just to see what it does?

Have a look at this and see if it won't work for you: http://www.nopeople.com/CSS/tooltip/