UI Laboratory

UI 개발을 위한 레퍼런스

jQuery
Tooltip

Tooltip은 링크에 마우스 오버시 보여지는 말풍선이다. 함수를 호출할때 인자에 옵션을 부여하여 마우스오버된 위치에 툴팁을 보여주거나 마우스이동시 툴팁이 마우스를 계속 따라다니게 할 수 있다. 이때 이벤트를 이용하여 마우스오버시 위치값을 구하는 공식이 제일 중요하다. 또한 일반적으로 링크는 상위에 컨테이너 요소를 가지고 있으므로 반드시 컨테이너 요소에 position값이 relative로 설정되어 있어야 한다.

fn_tooltip(containerID,linkID,titleVar,event)
- containerID : 링크(a태그)와 툴팁을 포함하고 있는 컨테이너 요소의 ID
- linkID : 링크(a태그)를 포함하고 있는 부모 요소의 ID
- titleVar : 링크(a태그)의 title을 툴팁 텍스트로 설정하길 원하면 인자의 값을 true로 설정
- event : 이벤트 타입, 값이 'mouseover'이면 마우스오버시 툴팁이 나타나고 'mousemove'이면 마우스의 움직임을 따라 툴팁도 이동
설명
예제-1은 세번재 인자 titleVar에 true를 전달하여 링크(a 태그)의 'title' 텍스트를 툴팁으로 이용하고 있다.
또한 네번째 인자인 event에 'mouseover'를 전달하여 마우스 오버된 위치에 툴팁이 고정(fixed)되어 나타난다.

fn_tooltip('stage1','tip1', true, 'mouseover');

예제-1

설명
예제-2는 세번재 인자 titleVar에 true를 전달하여 링크(a 태그)의 'title' 텍스트를 툴팁으로 이용하고 있다.
하지만 네번째 인자인 event에 'mousemove'를 전달하여 링크위에서 마우스이동(mousemove)시 툴팁이 마우스를 따라다닌다.

fn_tooltip('stage2','tip2', true, 'mousemove');

예제-2

설명
예제-3은 세번재 인자 titleVar에 false를 전달하여 링크(a 태그)의 'title' 텍스트를 툴팁으로 이용하지 않고 툴팁태그(<p class="tooltip">)에 직접 작성한 텍스트를 툴팁으로 이용한다.
그리고 네번째 인자인 event에 'mousemove'를 전달하여 링크위에서 마우스이동(mousemove)시 툴팁이 마우스를 따라다닌다.

fn_tooltip('stage3','tip3', false, 'mousemove');

예제-3

이 링크는 조금 다릅니다~

title속성이 아닌 말풍선 텍스트를 보여줍니다.

HTML

					

					

					

이 링크는 조금 다릅니다~

title속성이 아닌 말풍선 텍스트를 보여줍니다.

CSS

					<style type="text/css">
						.stgWrap {position:relative; width:500px; height:150px; margin:10px auto 0; border:1px solid #ccc;}
						p.message {margin-top:70px; text-align:center;}
						p.message a {display:inline-block;}
						p.tooltip {display:none; position:absolute; width:240px; border:1px solid #ddd; background-color:#fff; padding:2px; font-size:11px; color:#b6893a;}
					</style>
				

Javascript

					<script type="text/javascript">

						fn_tooltip('stage1','tip1', true, 'mouseover');
						fn_tooltip('stage2','tip2', true, 'mousemove');
						fn_tooltip('stage3','tip3', false, 'mousemove');

						function fn_tooltip(containerID,linkID,titleVar,event){

							var $container = $('#'+containerID);
							var $link = $container.find('#'+linkID).find('>a');
							var $tooltip = $container.find('.tooltip');

							var title = titleVar; // 'title'속성을 툴팁 텍스트로 설정시 true로 설정하다.
							var eventType = event;	// 이벤트 type 설정
							var text ='';

							if(title){
								text = $link.attr('title');	//title변수가 true이면 'a'태그의 'title'속성에서 텍스트를 가져와 text변수에 저장한다.
							}


							$link.bind({
								'mouseenter' :function(e){

									var evnt = e;
									showTooltip(evnt);
								},
								'mousemove': function(e){

									var evnt = e;
									showTooltip(evnt);
								},
								'mouseleave': function(e){

									hideTooltip();
								}
							});

							if(eventType=='mouseover'){		// 이벤트 type이 'mouseover'이면 'mousemove'이벤트를 제거하여 showTooltip 함수가 실행되는 것을 막는다. 
								$link.unbind('mousemove');
							}

							function showTooltip(evnt){

								var e = evnt;	//이벤트 객체를 변수로 저장

								if(eventType=='mouseover'||eventType=='mousemove'){	//이벤트 type이 'mouseover'이거나 'mousemove'이면 실행될 공통 구문 (이벤트 좌표를 구하는 구문)

									var ex = e.pageX;	//이벤트가 발생한 x좌표
									var ey = e.pageY;	//이벤트가 발생한 y좌표

									var offset = $container.offset();	// 브라우저의 screen 좌표(0,0)에서 $container요소가 위치한 오프셋 좌표
									var offsetX = ex - offset.left;		// 이벤트가 발생한 x좌표에서 $container요소의 오프셋좌표의 x좌표를 뺀 값을 변수에 저장 ($container요소의 position이 relatvie일때 유효함)
									var offsetY = ey - offset.top;		// 이벤트가 발생한 y좌표에서 $container요소의 오프셋좌표의 y좌표를 뺀 값을 변수에 저장 ($container요소의 position이 relatvie일때 유효함)
								}

								if(title){
									$link.attr('title','');	// 'a'태그의 'title'속성의 텍스트를 지운다.
									$tooltip.html(text);	// text변수에 저장된 텍스트를 $tooltip 텍스트로 설정한다.
								}

								if(eventType=='mouseover'||eventType=='mousemove'){		//$tooltip의 넓이와 높이값을 변수에 저장한다.
									var width = $tooltip.outerWidth();		
									var height = $tooltip.outerHeight();
								}

								$tooltip.show();	//$tooltip를 화면에 보여준다.

								if(eventType=='mouseover'||eventType=='mousemove'){
									$tooltip.css({ 'left' : offsetX, 'top' : offsetY-height-10 });	//이벤트가 발생한 좌표를 $tooltip의 좌표로 설정한다.
								}

							}

							function hideTooltip(){

								$tooltip.hide();
								
								if(title){
									$tooltip.html('');
									$(this).attr('title',text);
								}
							}

						}

					</script>