84.jQuery - ToolTip : 도움말/풍선말 (13.Sample )
| ToolTip.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>툴팁 : 풍선 도움말</title> <style type="text/css"> .tooltiptitle { background-color:Silver; } .tooltipcontent { background-color:Yellow; } .tooltiplayer { display:none; width:250px; height:100px; border:1px solid gray; } </style> <script src="../../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.tt').mouseover(function(e) { $(this).mousemove(function(e) { $('#tooltiplayer #title').empty().append($(this).text()); $('#tooltitcontent #content').empty().append($(this).text()); var t = e.clientY - 15; //상단 좌표 var l = e.clientX + 20; //좌측 좌표 $('#tooltiplayer') .css({ "top": t, "left": l, "position": "absolute", "opacity": "0.8" }) .show(); //레이어 보이기 });//end mouseover }); //end mouseout //tt class에 마우스 아웃 $('.tt').mouseout(function() { $('#tooltiplayer').hide(); //레이어 숨기기 }); }); </script> </head> <body> <div id="tooltiplayer" class="tooltiplayer"> <div class="tooltiptitle"> <span id="title">제목들어오는 곳</span> </div> <div class="tooltipcontent"> <span id="content">내용들어오는 곳</span> </div> </div> <table border="1"> <tr> <td><span class="tt">안녕하세요</span></td> </tr> <tr> <td><span class="tt">반갑습니다</span></td> </tr> <tr> <td><span class="tt">또 만나요</span></td> </tr> </table> </body> </html> |
| 결과화면 |
[그림84-1] |
| 추가 설명 |
|
$(document).ready(function() { //tt class에 마우스 오버 $(this).mouseover(function(e) {//e는 익명변수 : 매개변수를 생성 - 마우스 좌표값을 넣기 위함 //$('#tooltiplayer').show(); //[1 : 테스트]레이어 보이기 //title <span> 찾아서 내용 비우고, 현재 <span>의 텍스트를 삽입 $('#tooltiplayer #title').empty().append($(this).text()); $('#tooltitcontent #content').empty().append($(this).text); var t = e.clientY - 15; //상단 좌표 var l = e.clientX + 20; //좌측 좌표 c }); //end mouseover }); //end mouseout //tt class에 마우스 아웃 $('.tt').mouseout(function() { $('#tooltiplayer').hide(); //레이어 숨기기 }); }); |
ToolTip.htm