jQuery] 마우스 클릭하면 마우스 근처에 나타나는 레이어 툴팁(Tooltip)

마우스를 클릭하면 마우스 우측하단에 레이어가 나오는 소스다.

만약 레이어가 브라우저 창의 너비나 길이를 벗어나게 되면 반대의 위치에 레이어를 보여준다.

반대의 위치에 레이어를 보여줬더니 기준점(0,0)을 벗어나게 되면 기준점(0,0)에 레이어를 배치한다.

 

위 샘플 각 환경에 맞게 수정해서 사용 가능하다.

Head

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

css

.imgSelect {
    cursor: pointer;
}
 
.popupLayer {
    position: absolute;
    display: none;
    background-color: #ffffff;
    border: solid 2px #d0d0d0;
    width: 350px;
    height: 150px;
    padding: 10px;
}
.popupLayer div {
    position: absolute;
    top: 5px;
    right: 5px
}

Javascript

function closeLayer( obj ) {
   $(obj).parent().parent().hide();
}
 
$(function(){
/* 클릭 클릭시 클릭을 클릭한 위치 근처에 레이어가 나타난다. */
      $('.imgSelect').click(function(e)
         {
         var sWidth = window.innerWidth;
         var sHeight = window.innerHeight;
         var oWidth = $('.popupLayer').width();
         var oHeight = $('.popupLayer').height();
         // 레이어가 나타날 위치를 셋팅한다.
         var divLeft = e.clientX + 10;
         var divTop = e.clientY + 5;
         // 레이어가 화면 크기를 벗어나면 위치를 바꾸어 배치한다.
         if( divLeft + oWidth > sWidth ) divLeft -= oWidth;
         if( divTop + oHeight > sHeight ) divTop -= oHeight;
         // 레이어 위치를 바꾸었더니 상단기준점(0,0) 밖으로 벗어난다면 상단기준점(0,0)에 배치하자.
         if( divLeft < 0 ) divLeft = 0;
         if( divTop < 0 ) divTop = 0;
         $('.popupLayer').css({
            "top": divTop,
            "left": divLeft,
            "position": "absolute"
         }).show();
      });
});