ХТМЛ-НИЗ

Код:

<script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
    $(this).find('.tip').show(); //Show tooltip
}, function() {
    $(this).find('.tip').hide(); //Hide tooltip      
}).mousemove(function(e) {
      var mousex = e.pageX + 20; //Get X coodrinates
      var mousey = e.pageY + 20; //Get Y coordinates
      var tipWidth = $(this).find('.tip').width(); //Find width of tooltip
      var tipHeight = $(this).find('.tip').height(); //Find height of tooltip
     
     //Distance of element from the right edge of viewport
      var tipVisX = $(window).width() - (mousex + tipWidth); 
      var tipVisY = $(window).height() - (mousey + tipHeight);
      
    if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
    mousex = e.pageX - tipWidth - 20;
    $(this).find('.tip').css({  top: mousey, left: mousex });
    } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
    mousey = e.pageY - tipHeight - 20;
    $(this).find('.tip').css({  top: mousey, left: mousex });
    } else {
    $(this).find('.tip').css({  top: mousey, left: mousex });
    }
});
});
</script>

КСС низ/верх:

Код:

.tip {
padding: 10px; /* расстояние текста от края окна */
color: black; /* цвет шрифта */
background-color: gray; /* фоновый цвет окна */
display: none;
position: absolute;
z-index: 1000;
        width: 150px; 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

куда нужно (таблица, к примеру):

Код:

<a href="ссылка" class="tip_trigger">никнейм 
<span class="tip" style="display: none; top: 15px; left: 15px; ">
содержимое всплывающего окна
</span></a>

В отличие от вашего примера, здесь сама ссылка не покрывается и остаётся кликабельной, внешний вид всплывающего окна редактируется в коде, который вставляется в CSS. Если вы не разбираетесь в CSS, почитайте эту солянку.

В CSS верх/низ:

Код:

.onhover-hidden {
display: none; }
.onhover:hover > .onhover-hidden {
display: block;}
.onhover:hover > .onhover-visible {
display: none; 
}

куда нужно (в пост, где разрешен html):

Код:

<div class="onhover">
<div class="onhover-visible">видно</div>
<div class="onhover-hidden">не видно</div>
</div>

Можно дублировать кучу раз, стиль задаётся в первом коде для css

Код:

.onhover {
/* тут стили для всего контейнера, с видимой и невидимо информацией (фон и прочее, если надо) */
}
.onhover> .onhover-visible {
/* тут стили для видимой части, до наведения */
}
.onhover:hover > .onhover-hidden {
/* тут стили для той части, которая становится видна после наведения */
}