Подсказки на css+jq

<a href="#" class="tip_trigger">Your Link Key Word <span class="tip">This will show up in the tooltip</span></a>

.tip {
  color: #fff;
  background:#1d1d1d;
  display:none; /*--Hides by default--*/
  padding:10px;
  position:absolute; z-index:1000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<script>

$(document).ready

$(document).ready(function() {
  //Подсказки
  $(".tip_trigger").hover(function(){
  tip = $(this).find('.tip');
  tip.show(); //Показываем подсказку
  }, function() {
  tip.hide(); //Скрываем подсказку
  }).mousemove(function(e) {
  var mousex = e.pageX + 20; //Получаем X координату
  var mousey = e.pageY + 20; //Получаем Y координату
  var tipWidth = tip.width(); //Находим ширину подсказки
  var tipHeight = tip.height(); //Находим высоту подсказки

  //Расстояние от элемента до правого края окна просмотра
  var tipVisX = $(window).width() - (mousex + tipWidth);
  //Расстояние от элемента до нижней части окна
  var tipVisY = $(window).height() - (mousey + tipHeight);

  if ( tipVisX < 20 ) { //Если подсказка превышает координату Х области просмотра
  mousex = e.pageX - tipWidth - 20;
  } if ( tipVisY < 20 ) { //Если подсказка превышает координату Y области просмотра
  mousey = e.pageY - tipHeight - 20;
  }
  //Абсолютное положение подсказки в соответствии с положением курсора мыши
  tip.css({ top: mousey, left: mousex });
  });
});