Положение блока.
 

Здраствуйте, сам не разбираюсь в js, но появилась необходимость сделать позиционирование блока относительно краев экрана. Вот код:

<div class="block"> 
 <div class="hidden-block">Тут скрытый текст, бла бла бла..</div>
 </div>

 <style>
 .block {width:100px; height:100px; float:right; display: block; background: #000;}
 .hidden-block {padding:10px; display: none; background: #f0f; width:400px;}
 .block:hover .hidden-block {display: block;}
 </style>

 <script> //Сразу скажу что выдрал этот код из какого-то скрипта..

 function smtMouseMove(e){
 smtMouseCoordsX=e.pageX;
 smtMouseCoordsY=e.pageY;
 smtTipPosition();
 }

 function smtTipPosition(){
 smtTip=$(".hidden-block"); 
 var cursor_tip_margin_x=0; //Промежуток по горизонтали между курсором и подсказкой
 var cursor_tip_margin_y=24; //Промежуток по вертикали между курсором и подсказкой
 var leftOffset=smtMouseCoordsX+cursor_tip_margin_x+$(smtTip).outerWidth();
 var topOffset=smtMouseCoordsY+cursor_tip_margin_y+$(smtTip).outerHeight();
 if(leftOffset<=$(window).width()){
 smtTip.css("left",smtMouseCoordsX+cursor_tip_margin_x);
 } else {
 var thePosX=smtMouseCoordsX-(cursor_tip_margin_x)-$(smtTip).width();
 smtTip.css("left",thePosX);
 }
 if(topOffset<=$(window).height()){
 smtTip.css("top",smtMouseCoordsY+cursor_tip_margin_y);
 } else {
 var thePosY=smtMouseCoordsY-(cursor_tip_margin_y)-$(smtTip).height();
 smtTip.css("top",thePosY);
 }
 }
 </script>

Но все это не работает, при наведении курсора на блок с классом block, появляется блок с классом hidden-block, который выезжает за границы экрана.. Как сделать чтобы при расположении в правом углу экрана подсказка выводилась слева и наоборот?

К примеру как на этом сайте. При наведении на постер, появляется желтая иконка i, при наведении курсора на нее, появляется блок который распологается относительно краев экрана.

Гуру js, help me :help: