a.tt{  
  position:relative;  
  z-index:24;  
  color:#3CA3FF;  
  font-weight:bold;  
  text-decoration:none;  
  }  
  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: #aaaaff; background:;}  
        a.tt:hover span.tooltip{  
        display:block;  
      position:absolute;  
        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;  
        }

<a href="#" class="tt">  
        Тут текст термина (который нуждается в подсказке)  
        <span class="tooltip">  
        <span class="top">  
        </span>  
        <span class="middle">  
        Тут текст всплывающей подсказки  
        </span>  
        <span class="bottom">  
        </span>  
        </span>  
        </a>