Tooltips

"툴팁"은 텍스트나 이미지 위에 마우스 포인터를 올려 놓을 때 말 풍선처럼 보충설명을 하는 텍스트를 표시하는 UI입니다. 툴핍 자체는 title 속성이나 img 태그의 alt 속성에 텍스트를 기술하는 것으로 표시됩니다만, 브라우저의 종류에 따라 디자인이나 움직임이 달라 HTML이나 CSS로 커스트마이즈하는 것이 어렵습니다. 그러나 jQuery를 이용하면 브라우저에 의존하지 않는 툴팁을 간단히 구현할 수 있습니다.

1. CSS로 꾸민 심플한 툴팁

CSS로 꾸민 심플한 툴팁

HTML

							tooltip sample 이것은ASCII.jp
Web제작현장에서 사용한 jQuery
UI디자인 입문

의 샘플 프로그램입니다.

HTML의 구현은 툴팁을 설정하는 링크는 보통 때와 마찬가지로 a 태그로 기술하고 툴팁 안에 보여줄 보충 설명 텍스트는 a 태그의 뒤에 span 태그로 기술합니다. span 태그에는 "tooltip"이라고 class 속성을 설정합니다.

CSS

							span.tooltip{line-height:1.5;color:white;width:200px;background:#FF9900;border:2px solid white;padding:1em;font-size:small;}										
						

툴팁 부분의 CSS는 다음과 같습니다. 이 툴팁은 fadeIn()/fadeOut()을 사용하여 애니메이션을 붙여서 표시/비표시 상태를 변경합니다. fadeIn/fadeOut은 opacity(투명도)의 값을 서서히 변경하면서 마지막에 display속성을 "block" 혹은 "none"으로 변경합니다. 이를 위해서 span태그의 CSS는 블럭 속성으로 변경되는 것을 전제로 설정합니다.

SCRIPT

							$(document).ready(function(){
								$("span.tooltip").css({
									opacity:"0.9",
									position:"absolute",
									display:"none"
								});
								$("a").mouseover(function(){
									$("span.tooltip").fadeIn();
								}).mouseout(function(){
									$("span.tooltip").fadeOut();
								}).mousemove(function(e){
									$("span.tooltip").css({
										"top":e.pageY+10+"px",
										"left":e.pageX+10+"px"
									});
								});
							});										
						

소스의 처음은 툴팁의 초기 표시 상태(페이지가 읽어 들여진 직후의 상태)를 설정하고 있습니다. 툴팁은 마우스 포인터가 a태그 위로 올라갈 때까지 비표시 상태로 유지할 필요가 있습니다만, CSS로 비표시로 설정하면 JavaScript off 환경에서는 보충 설명하는 텍스트를 확인할 수 없게 됩니다. 그런 이유로 jQuery의 css()를 사용하여 초기 표시 상태를 설정해 둡니다. css()에서는 툴팁을 반투명으로 하기 위해 opacity 속성에 투명도를 설정하고 있습니다. 투명도는 0~1 사이의 수식으로 지정 가능하고 0은 완전투명, 1은 완전불투명입니다. 위 소스에서 툴팁 뒤쪽으로 있는 텍스트가 투과되어 보일 수 있도록 "0.8"을 지정하고 있습니다. 툴팁의 위치는 절대 위치로 지정하므로 position속성은 "absolute"로, 마우스 오버가 될 때까지 비표시상태를 유지하기 위해 display 속성을 "none"으로 합니다.

							$("span.tooltip").css({
								opacity:"0.9",
								position:"absolute",
								display:"none"
							});									
						

이후는





2. 투명한 GIF로 만든 고정위치 툴팁

투명한 GIF로 만든 고정위치 툴팁

HTML

							

이것은ASCII.jp
Web제작현장에서 사용한 jQuery
UI디자인 입문

의 샘플 프로그램 입니다.

CSS

							div.tooltip{width:230px;position:absolute;}
							div.tooltip p{line-height:1.5;margin:0;font-size:small;background:url("/florakid_lib/images/sample/tooltipBody.gif") top right;padding:10px 5px 0 40px;}
							div.tooltip img{vertical-align:top;}													
						

SCRIPT

							$(document).ready(function(){
								$("div.tooltip").css("opacity","0.9").hide();
								$("a").mouseover(function(){
									$("div.tooltip").fadeIn().css({
										"top": $(this).offset().top-20+"px",
										"left": $(this).offset().left+$(this).width()+"px"
									});
								}).mouseout(function(){
									$("div.tooltip").fadeOut()
								});
							});										
						




3. 투명한 PNG로 만든 타이머식 툴팁

투명한 PNG로 만든 타이머식 툴팁

HTML

							

이것은ASCII.jp
Web제작현장에서 사용한 jQuery
UI디자인 입문

의 샘플 프로그램 입니다.

CSS

							p.tooltip{line-height:1.5;color:white;margin:0;width:185px;height:86px;position:absolute;padding : 10px 20px 20px 10px;background:url("/florakid_lib/images/sample/tooltip.png");font-size:small;}
							* html p.tooltip{
								background:none;
								filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/florakid_lib/images/sample/tooltip.png',sizingMethod='scale');
							}
						

SCRIPT

							$(document).ready(function(){
								$("p.tooltip").hide();
								$("a").mouseover(function(){
									$("p.tooltip").show().css({
										"top":$(this).offset().top-20+"px",
										"left":$(this).offset().left+$(this).width()+10+"px"
									});
								}).mouseout(function(){
									setTimeout(function () {
										$("p.tooltip").hide();
									},3000);
								});
							});