CSS tooltip help

[petteyg359]

I'm using the following in the extra CSS section of a style to create tooltips.

a.info{
 position:relative;
 color:#C0C000;
 text-decoration:none;
 z-index: 24;
}

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

a.info span{
 display: none;
}

a.info:hover span{
 display: block;
 position: absolute;
 top: 10px; left: 0;
 width: 24em;
 padding: 5px; margin: 10px; z-index: 100;
 border:1px solid orange;
 background-color:#000000;
 filter:alpha(opacity=90);
 -moz-opacity:0.9;
 opacity:0.9;
 color:#C0C000;
 text-align: left;
}

<a class="info">text<span>tip</span></a>

for displaying them.

I have been trying to make the tooltips be variable width (fit contents) rather than fixed, but if I remove the width attribute or do width: auto; then every tooltip is very narrow (about 56px). They also float _behind_ tcat and thead elements of vB tables, and I need them to be on top. Played with the z-index values and can't figure out where it's wrong.