Помогите изменить красивую всплывающую подсказку

[lirin]

Хочу чтобы подсказка находилась слева, параллельно тексту на который наводиться и шириной блок подсказки был бы больше в 2 раза как сделано здесь:

http://mir-es.com/leska.php?g=%D3%F0%EE%EA1&link=4
На этой странице код <a href=# class=tt>текст подсказки<span class=tooltip><span class=middle>текст для наведения</span>
В файле стилей такой код

a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #663300; background:;}
a.tt:hover span.tooltip{



display:block;
position:relative;

top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{

display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(bubble_filler.gif) repeat bottom;

}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(bubble.gif) no-repeat bottom;
}