<a href="#" class="tooltip">  
Слово<div class="tooltip_text">Тут текст всплывающей подсказки!</div></a>  

<script type="text/javascript">  
$(function() {  
$('.tooltip').mouseover(function(){  
$(this).children('div').fadeIn(2000);  
})  
$('.tooltip').mouseout(function(){  
$(this).children('div').fadeIn(1000);  
})  
$('#tooltip_content').mouseover(function(){  
$(this).children('div').fadeOut(2000);  
})  
});  
</script>  

.tooltip  
{  
position: relative;  
display: inline-block;  
text-decoration: none;  
outline: none;  
}  

.tooltip div  
{  
visibility: hidden;  
position: absolute;  
bottom: 40px;  
left: 50%;  
z-index: 999;  
width: 230px;  
margin-left: -127px;  
padding: 10px;  
border: 2px solid #000000;  
opacity: .9;  
background-color: #000000;  
-moz-border-radius: 4px;  
border-radius: 4px;  
cursor:auto;  
}  

.tooltip:hover  
{  
border: 0; /* IE6 fix */  
}  

.tooltip:hover div  
{  
visibility: visible;  
}  

.tooltip div:before,  
.tooltip div:after  
{  
content: "";  
position: absolute;  
z-index: 1000;  
bottom: -7px;  
left: 50%;  
margin-left: -8px;  
border-top: 8px solid #000000;  
border-left: 8px solid transparent;  
border-right: 8px solid transparent;  
border-bottom: 0;  
}  
.tooltip div:before  
{  
border-top-color: #000000;  
bottom: -8px;  
}  
.tooltip_text {  
color:#fff;