Tooltip

툴팁은 사용자 인터페이스를 설명하기 위한 훌륭한 해결 방법이 될 수 있는데, 특히 사용자 선호기능 (예, "이 메시지를 다시 표하지 않음"과 같은 기능) 에 이를 사용하는 경우 유용할 수 있다.
title="..." 어트리뷰트만으로는 충분치 않을때 사용.

RemoteCall은 상담원이 웹브라우저를 통해 고객의 디바이스에 접속하여 원격으로 장애를 진단하고 실시간 문제 해결하는 원격지원 솔루션입니다. 고객의 PC 화면을 공유하여 실시간으로 고객의 문제를 해결할 수 있는 원격지원/제어 제품으로, 고객은 접속페이지에서 원클릭만으로 쉽게 연결이 가능합니다. 고객과의 원활한 커뮤니케이션을 위해, Instant Web-Based Chat, Video/Voice Chat, Whiteboard 등의 툴을 제공하는 RemoteCall은 고객지원, 사내 컴퓨터 유지보수, 업무 공유를 위한 협업 등의 다양한 업무에 활용할 수 있습니다.
Options
Name type default description
enter string mouseenter mouseover 마우스가 Target에 접근했을때를 가정으로 설정이 가능합니다.
leave string mouseleave mouseout 마우스가 Target을 떠났을때를 가정으로 설정이 가능합니다.
placement string top Target요소 기준으로 left | right | top | bottom 설정이 가능합니다.
content string content 태그에 속성으로 기입하는 방법과 내용이 길 경우를 위하여 플러그인 선언시 옵션으로 기입이 가능합니다.

태그의 속성으로 기입 : data-content="내용입력"
플러그인 선언시 옵션으로 기입 :
$('DOM').popover({ content: "내용입력" });
HTML
		RemoteCall
CSS
		.tooltip {
		  position: absolute; z-index: 1020; display: none; visibility: visible; padding: 5px; font-size: 11px; opacity: 0; filter: alpha(opacity=0) ;
		}
		.tooltip.in { opacity: 0.8; filter: alpha(opacity=80); }
		.tooltip.top { margin-top: -2px; }
		.tooltip.right { margin-left: 2px; }
		.tooltip.bottom { margin-top: 2px; }
		.tooltip.left { margin-left: -2px; }
		.tooltip.top .tooltip-arrow {
		  bottom: 0;  left: 50%; margin-left: -5px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #AB0020;
		}
		.tooltip.left .tooltip-arrow {
		  top: 50%; right: 0; margin-top: -5px; border-top: 5px solid transparent;  border-bottom: 5px solid transparent; border-left: 5px solid #AB0020;
		}
		.tooltip.bottom .tooltip-arrow {
		  top: 0; left: 50%; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #AB0020;
		}
		.tooltip.right .tooltip-arrow {
		  top: 50%; left: 0; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #AB0020;
		}
		.tooltip-inner {
		  max-width: 200px; padding: 3px 8px; color: #fff; text-align: center;  text-decoration: none;  background-color: #AB0020;
		  -webkit-border-radius: 4px; -moz-border-radius: 4px;  border-radius: 4px;
		}
		.tooltip-arrow { position: absolute; width: 0; height: 0; }
		
		/* IE6 Fix */
		.tooltip.top .tooltip-arrow,
		.tooltip.right .tooltip-arrow,
		.tooltip.bottom .tooltip-arrow,
		.tooltip.left .tooltip-arrow { line-height: 0 }
		
		/* IE6 Transparency Fix */
		.tooltip.top .tooltip-arrow, 
		.tooltip.bottom .tooltip-arrow { _border-right-color: white; _border-left-color: white; _filter: chroma(color = white) }
		.tooltip.right .tooltip-arrow,
		.tooltip.left .tooltip-arrow { _border-top-color: white; _border-bottom-color: white; _filter: chroma(color = white) }
Javascript
	/** =======================================================
	 * RFC readmore Plugin
	 * 
	 * @Author Choi Jae Hee
	 * @Copyright © 2012 RSUPPORT. CO, LTD. All rights Reserved.
	 * 
	 * @Required jQuery
	 * ======================================================== */
	;(function($) {
	
		$.fn.tooltip = function(options) {
	
			var opts = $.extend({}, $.fn.tooltip.defaults, options)
				, $tooltip
				, inside
				, pos
				, actualWidth
				, actualHeight
				, placement;
	
			console.log('tooltip', arguments);		
	
			return this.each(function() {
				var $opener = $(this)
					, targetPosition = $opener.offset()
					, tooltipPosition = {};
	
				$opener.bind(opts.enter, function() {
					var getPosition = function (inside) {
						return $.extend({}, (inside ? {top: 0, left: 0} : $opener.offset()), {
							width: $opener[0].offsetWidth
						, height: $opener[0].offsetHeight
						})
					};
					$tooltip = $('.tooltip');
	
					// Insert Content
					$tooltip.find('.tooltip-inner').text( $.trim($opener.data('content')) || opts.content);
					placement = typeof opts.placement == 'function' ?	opts.placement.call(this, $tooltip[0], $element[0]) :	opts.placement;
					inside = /in/.test(placement);
	
					$tooltip
						.remove()
						.css({ top: 0, left: 0, display: 'block' })
						.appendTo(inside ? $(this) : document.body);
	
					pos = getPosition(inside);
					actualWidth = $tooltip[0].offsetWidth;
					actualHeight = $tooltip[0].offsetHeight;
	
					switch (inside ? placement.split(' ')[1] : placement) {
						case 'bottom':
							tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
							break;
						case 'top':
							tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
							break;
						case 'left':
							tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
							break;
						case 'right':
							tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
							break;
					}
	
					$tooltip
						.css(tp)
						.addClass(placement)
						.addClass('in')
				});
	
				// leave event
				$opener.bind(opts.leave, function(e) {
					if($tooltip.css('display')) {
						$tooltip.hide();
					}
				});
			});
		}
	
	  // Default Options
	  $.fn.tooltip.defaults = {
	    enter: 'mouseenter mouseover',
	    leave: 'mouseleave mouseout',
 	    placement: 'top'
	  };
	
	  $('a[rel=tooltip]').tooltip({
	    content: '내용이 길어질 경우 options을 이용해 주세요.'
	  });
	
	})(jQuery);
History