Dev/jQuery

[jQuery] Tooltip 구현하기

쇼크리더 2009. 12. 17. 15:45
반응형

대략 동작만 되게 만들어봤다.
더 욕심을 부려야 하는건지..
우선 여기까지만..
><!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>
	<link href="Css/cssJMBae.css" rel="stylesheet" type="text/css" />
	<style type="text/css">		
		#tooltipShow
		{
			position: absolute;
			background: #efd;
			border: 1px solid #ccc;
			padding: 3px;
			width: 400px;
		}
	</style>
	<script src="Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
	<script type="text/javascript" language="javascript">
		$(document).ready(function () {
			var positionTooltip = function (event) {
				//				alert("이벤트발생");
				var tPosX = event.pageX - 5;
				var tPosY = event.pageY + 15;
				//				alert(tPosX +  "-" +  tPosY);
				$('#tooltipShow').css({ top: tPosY, left: tPosX });
			};
			
			$('#tooltipShow').hide();

			$('#tooltip')
			.hover(function () {
				$('#tooltipShow').show();
			},
			function () {
				$('#tooltipShow').hide();
			})
			.mousemove(positionTooltip);
		});
		
	</script>
</head>
<body>
	<div>
		예제도 많지만 이번것은 <span id="tooltip"><u>툴팁</u>인거다.</span>
	</div>
	
	<div id="tooltipShow">C#은 형식이 안전한 개체 지향 언어로, 간단하면서도 강력한 기능을 제공하므로 프로그래머는 이를 통해 광범위한 응용 프로그램을 개발할 수 있습니다. .NET Framework와 결합된 Visual C# 2008을 사용하여 Windows 응용 프로그램, 웹 서비스, 데이터베이스 도구, 구성 요소, 컨트롤 등을 만들 수 있습니다. 추가 정보:

Visual C# 시작
Visual C# 둘러보기
Visual C#을 사용하여 응용 프로그램 작성</div>
</body>
</html>


실행 모습

반응형