드래그 해서 Tooltip 띄우기

화면에 글짜를 선택하면 자동으로 툴팁이 생기고

클릭시에 선택된 글짜로 새창을 띄우는 예제.

Vertax Shader

/************************************************************************************************************ 
	- Layer(드래그후 검색)
************************************************************************************************************/
.ly-pop_menuwrap{ display:inline-block;border:2px solid #777; background:#f8f8f8; overflow:visible;line-height:normal;box-shadow:2px 2px 0px rgba(0,0,0,0.1)}
.ly-pop_menuwrap:hover{border:solid 2px #2a3b5c; }
.ly-pop_menuwrap .ly_header{margin:0 0 5px;padding:2px 0 4px 11px;background:#f4f4f4;color:#000;font-size:13px;font-weight:bold}
.ly-pop_menuwrap ul li{ padding:3px 7px;color:#333; border-bottom:solid 1px #ccc}
.ly-pop_menuwrap ul li:last-child { border-bottom:none}
.ly-pop_menuwrap ul li a{ color:#333;font-family:'NanumGothicB';}
.ly-pop_menuwrap ul li a:hover{color:#fff;}
.ly-pop_menuwrap ul li:hover{background:#34486f; cursor:pointer}
.ly-pop_menuwrap ul li:hover a{color:#fff;font-family:'NanumGothicEB';}

Fragment Shader

/**
 * 통합검색
 * dragSearch.init();
 */
var dragSearch = {
	dragStr : "",	//선택한 string
	_sel : null,	//선택영역 element
	cssName : "ly-pop_menuwrap",
	parentTag : "body",
	makeTag : function(){
		
		if($('.'+this.cssName).length == 0){
			var s = '';
			s+='
';
			s+='
';
			s+='
통합검색
';
			s+='
';
			s+='
';
			$(s).appendTo('body');
		}
	},
	init : function(){
		//초기 TAG생성 
		this.makeTag();
		
		/* Mouse Event */
		$(this.parentTag).mousedown(function(e) {
			$("."+dragSearch.cssName).hide();
		});
 
		$("."+this.cssName).mousedown(function(e) {
			e.stopPropagation();
 
			dragSearch.openPopup();
			$("."+dragSearch.cssName).hide();
			
			if(dragSearch._sel == null) return;
			dragSearch._sel.removeAllRanges();
		});
		
		$(this.parentTag).mouseup(function(e) {
			dragSearch._sel = window.getSelection();
			if(dragSearch._sel == null) return;
			
			dragSearch.dragStr = dragSearch._sel.toString();
			if(dragSearch.dragStr != null && dragSearch.dragStr != "") {
				//console.log("mouse up! x=" + e.clientX + " , y="+e.clientY);
				//console.log(dragSearch.dragStr);

				var divTop = e.clientY;
				var divLeft = e.clientX;

				$("."+dragSearch.cssName).css({
					"top":divTop,
					"left":divLeft,
					"position":"absolute"
				}); //.show();

				setTimeout(function() {
					$("."+dragSearch.cssName).show();
				},500);

				//console.log(dragSearch.dragStr.indexOf("\n"));
				//console.log(dragSearch.dragStr);

				if(dragSearch.dragStr.indexOf("\n") >= 0) {
					var t_str = dragSearch.dragStr.split("\n");
					dragSearch.dragStr = t_str[0];
				}

				//console.log(dragSearch.dragStr);

			} else {
				//console.log("X");
				dragSearch.dragStr = "";
				$("."+dragSearch.cssName).hide();
			}
		});
	},
	openPopup : function(){
		//$(".ly-pop_menuwrap").hide();
		var encStr = encodeURIComponent(this.dragStr);
		window.open("http://localhost:8080/common/search/SearchResultRequest.do?keyword="+encStr);
	},
	openFrame : function(){
	}
};