jquery tooltip position 질문 채택완료
ㅁㅇㅁㅇㅁㅇ
7년 전
조회 4,423
마우스 커서가 안 보이지만 해당 게시물 호버시 해당 게시물 옆에 툴팁이 나와야 되는데 해당 게시물의 밑 게시물에 툴팁이 나옵니다...
혼자 한다고 이것저것 하는게 도무지 뭐가 뭔지 모르겠네요;;;
jquery.tooltip.js에서 건드는거 같은데..
어디를 건드려야 하나요??
(function($){"use strict";$.fn.tooltip=function(settings){var config,tooltip_map={},id_index=1;config={'dialog_content_selector':'div.tooltip_description','animation_distance':50,'opacity':0.55,'arrow_left_offset':70,'arrow_right_offset':20,'arrow_top_offset':50,'arrow_height':20,'arrow_width':20,'animation_duration_ms':300,'event_in':'mouseenter','event_out':'mouseleave','hover_in_delay':0,'hover_out_delay':0};if(settings){$.extend(config,settings);}function _generateDomId(){var time=(new Date()).getTime();id_index+=1;return id_index+"_"+time;}function _create(content_elm,target_elm){var header=($(content_elm).attr("title"))?"
"+$(content_elm).attr("title")+"
":'',dom_id=$(target_elm).attr('id'),dialog_elm;if(!dom_id){dom_id=_generateDomId();$(target_elm).attr('id',dom_id);}else if(tooltip_map[dom_id]){return tooltip_map[dom_id];}dialog_elm=$(["","","","","
"].join(""));dialog_elm.appendTo("body");$(dialog_elm).bind('mouseenter',function(){$(this).attr('data-mouseenter',1);}).bind('mouseleave',function(){$(this).attr('data-mouseenter',0);});tooltip_map[dom_id]=dialog_elm;return dialog_elm;}function _show(target_elm){var dialog_content=$(target_elm).find(config.dialog_content_selector),dialog_box=_create(dialog_content,target_elm),is_top_right=$(target_elm).hasClass("tooltiptopright"),is_bottom_right=$(target_elm).hasClass("tooltipbottomright"),is_left=$(target_elm).hasClass("tooltipleft"),is_top=$(target_elm).hasClass("tooltiptop"),is_bottom=$(target_elm).hasClass("tooltipbottom"),has_position=is_top_right||is_bottom_right||is_top||is_bottom,position,target_elm_position=$(target_elm).offset();position={start:{left:target_elm_position.left+$(target_elm).outerWidth()+config.animation_distance+10,top:target_elm_position.top+($(target_elm).outerHeight()/2)+config.arrow_top_offset-$(dialog_box).outerHeight()+config.arrow_height+13},end:{left:target_elm_position.left+$(target_elm).outerWidth()+10,top:target_elm_position.top+($(target_elm).outerHeight()/2)+config.arrow_top_offset-$(dialog_box).outerHeight()+config.arrow_height+13},arrow_class:"div.left_arrow"};$(dialog_box).find("div.left_arrow").css({top:$(dialog_box).outerHeight()-(config.arrow_top_offset*2)+"px"});$(dialog_box).css({top:position.start.top+"px",left:position.start.left+"px",opacity:config.opacity});$(dialog_box).find("div.arrow").hide();$(dialog_box).find(position.arrow_class).show();$(dialog_box).animate({top:position.end.top,left:position.end.left,opacity:"toggle"},config.animation_duration_ms);}function _hide(target_elm){var dom_id=$(target_elm).attr('id'),dialog_elm=tooltip_map[dom_id];if(dialog_elm){if(parseInt(dialog_elm.attr('data-mouseenter'),10)){setTimeout(function(){_hide(target_elm);},500);}else{dialog_elm.unbind();dialog_elm.stop().remove();delete tooltip_map[dom_id];}}}this.each(function(){var hoverTimer,ele=this;$(this).bind(config.event_in,function(){clearTimeout(hoverTimer);hoverTimer=setTimeout(function(){_show(ele);},config.hover_in_delay);}).bind(config.event_out,function(){clearTimeout(hoverTimer);hoverTimer=setTimeout(function(){_hide(ele);},config.hover_out_delay);});});return this;};}(jQuery));
"+header+$(content_elm).html()+"
","","","
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
7년 전
</p>
<p><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>tooltip</title>
<script src="js/jquery-1.12.4.min.js"></script>
<style type="text/css">
*{margin:0; padding:0;}
body{background-color:#333; color:#fff;}
a{color:#f90;}
h1{width:100%; text-align:center; padding:20px 0;}
p{width:50%; margin:0 auto;}</p>
<p> .tooltip{
width:300px;
height:80px;
line-height:25px;
background-color:#050;
font-size:0.8em;
position:absolute;
}
em{font-style:normal;}
</style>
<script>
// 두번째 문법 사용하기
$(document).ready(function(){
$(".tooltip").hide();
// .link1에 마우스를 올리면 .tooltip이 옆에 위치하게 만들기
// 대상: link1
// 이벤트: mouseover
// 이벤트 핸들러: tooltip
// 효과: absolute, top, left</p>
<p> $(".link1").mouseover(function(){
// 대상: tooltip
// 이벤트: fadeIn() , css (left, top)
// 이벤트 핸들러: 대상이 link1옆으로 이동
// left의 대상: link1의 옆에
// 이벤트: 지정된 대상부터의 간격..offset(간격)
// 문제점: .tooltip이 .link1을 가려주는 문제점 발생
//
$(".tooltip").fadeIn(500).css({"left":$(".link1").offset().left+$(".link1").width()+"px","top":$(".link1").offset().top-50+"px"});
}).mouseout(function(){
$(".tooltip").fadeOut(500);
});</p>
<p> // link2에 마우스를 올리면 tooltip이 나타나도록 만들기
// left, top을 사용하여 위치값 작성하기( link2가 대상 )
$(".link2").mouseover(function(){
$(".tooltip").fadeIn(500).css({"left":$(".link2").offset().left+$(".link2").width()+"px","top":$(".link2").offset().top});
}).mouseout(function(){
$(".tooltip").fadeOut(500);
});
});
</script>
</head>
<body>
<h1>company 찾아오시는 길</h1>
<p>
자사 Company는 프로그래밍에서 꼭 필요한 code 작업을 재밌고 즐겁게
교육하는 기업입니다. 저희 <a class="link1" href="<a href="http://www.google.com"" target="_blank" rel="noopener noreferrer">http://www.google.com"</a> title="구글사이트">Company</a>의 교육 과목으로는 C/C++, 웹표준,
모바일웹 앱, javascript/jQuery가 있으며, 프로그램밍을 전문으로 하여
초보에서 전문가까지 쉽고 빠르게 현장에서 충분한 능력을 펼칠수 있도록
최선의 교육을 지향하고 있습니다-<a class="link2" href="<a href="http://www.google.com"" target="_blank" rel="noopener noreferrer">http://www.google.com"</a> title="구글사이트">Company</a>
</p>
<div class="tooltip">
<h3>상세주소</h3>
<strong>찾아오시는 길</strong>:
<em>서울시 강남구 역삼동 123-456 D빌딩 10층</em>
</div>
</body>
</html></p>
<p>
이거 응용해보세요 ㅎㅎ
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
ㅁㅇㅁㅇㅁㅇ
7년 전
제가 다른 방법으로 하긴 했지만 감사합니다 ㅎㅎ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인