[javascript] 툴팁(tooltip) 띄우기

나중에 다시 쓸일이 있을것 같아 남겨 놓는다....

 

div안에서 mouseover 이벤트에 사용하려고 만들어 놨던 소스이다.

 

DisplayTip(이벤트 일어난 객체, 왼쪽 공백크기, 위쪽 공백크기, 내용, tooltip 크기);

 

이런 식으로 적용해서 쓰면 된다. 

 

* IE7 z-index  

아... 요놈의 버그 땜시 짜증났네;;  

tooltip을 보여줄 곳에 최상단 div에  

position:relative; <---- style에 요놈 추가 해줘야된다...ㅡㅡ 

 

<script>

 

DisplayTip(this,128,this.offsetTop + 69,content,200); 

 

var TipBoxID = "TipBox";

    var tip_box_id;

    function DisplayTip(me,offX,offY,content,width) {
       var tipO = me;
       tip_box_id = document.getElementById(TipBoxID);
       tip_box_id.style.left = String(parseInt(offX) + 'px');
       tip_box_id.style.top = String(parseInt(offY) + 'px');
       tip_box_id.style.width = width + 'px';
       tip_box_id.innerHTML = content;
       tip_box_id.style.display = "block";
       tipO.onmouseout = HideTip;
    } // function DisplayTip()

    function HideTip() { tip_box_id.style.display = "none"; }

 

</script>

 

<div 
       id="TipBox" 
       style="
          display:none;
          position:absolute; 
          font-size:12px;
          font-weight:bold;
          font-family:verdana;
          border:#72B0E6 solid 1px;
          padding:15px;
          color:#1A80DB;
          background-color:#FFFFFF;
          z-index:1">
    </div>