툴팁(Tooltip) : 풍선 도움말
.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 13:40 |
[Tooltip.htm]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// tt class에 마우스 오버
$('.tt').mouseover(function (e) {
// 현재 오버된 개체에서 마우스 움직일 때
$(this).mousemove(function (e) {
// title <span> 찾아서 내용 비우고, 현재 <span>의 텍스트를 삽입
$('#tooltiplayer #title').empty().append($(this).text());
$('#tooltiplayer #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 mousemove
}); // 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>
-------------------------------------------------------------------------------------
[실행결과]
'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글
| 테이블 예제 - 짝수행과 홀수행의 배경색 변경 (0) | 2009.11.18 |
|---|---|
| 테이블 예제1 (0) | 2009.11.17 |
| 체크박스 전체선택 및 해제 (0) | 2009.11.17 |
| jQuery PlugIn - 사진 상세 보기 플러그인 제작 (나만의 플러그인) (0) | 2009.11.17 |
| jQuery PlugIn - 새로운 함수를 만들기 (0) | 2009.11.17 |