Красивые всплывающие подсказки

<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;

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