[jquery] 마우스 클릭시 화면이 나오는 툴팁(Tooltip)

[jquery] 마우스 클릭시 화면이 나오는 툴팁(Tooltip)

툴팁을 사용하는 경우가 발생하였을때 참고하기 위하여 글을 작성해봅니다.

필자의 경우엔 해당 예제를 활용하여 테이블에 툴팁기능을 추가하였습니다.

해당 예제는 Html 단의 테스트를 클릭하면 작게 툴팁이 나오는 방식인데 이를 활용하여 

테스트를 눌렀을때 테스트의 키값을 컨트롤러 단에 보내준다음 다시 popupLayer로 내용을 받아 뿌려주는 방식으로 

진행하였습니다.

이는 아래예제를 활용한 하나의 예제 이니 예제를 보고 필요하신분들은 이용하시면 될듯합니다.

▼  Jquery 사용 예제 툴팁 사용예제

- HTML

<!-- 클릭  -->
<p>
    <a class="Select">테스트</a>
    <a class="Select">테스트1</a>
    <a class="Select">테스트3</a>
</p>
<!-- 폼 레이어  -->
<div class="popupLayer">
    <div>
        <span onClick="closeLayer(this)" style="cursor:pointer;font-size:1.5em" title="닫기">X</span>
    </div>
    클릭하였을때 나오는곳</br>
</div>
<!-- //폼 레이어  -->
 
<p><br/></p>
<p><br/></p>

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

- Jquery

function closeLayer( obj ) {
    $(obj).parent().parent().hide();
}
 
$(function(){
 
    /* 클릭 클릭시 클릭을 클릭한 위치 근처에 레이어가 나타난다. */
    $('.Select').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();
    });
 
});
 
 

* 예제는 구글 검색중에 발견하였음을 남기며 사이트는 추후 발견시 추신으로 남기도록하겠습니다