툴팁(Tooltip) : 풍선 도움말
[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>
-------------------------------------------------------------------------------------
[실행결과]
