jquery tooltip position 질문

jquery tooltip position 질문

QA

jquery tooltip position 질문

본문

1889961393_1512361714.211.jpg

마우스 커서가 안 보이지만 해당 게시물 호버시 해당 게시물 옆에 툴팁이 나와야 되는데 해당 게시물의 밑 게시물에 툴팁이 나옵니다...

 

혼자 한다고 이것저것 하는게 도무지 뭐가 뭔지 모르겠네요;;;

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"))?"<h1>"+$(content_elm).attr("title")+"</h1>":'',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=$(["<div class='jquery-gdakram-tooltip'>","<div class='up_arrow arrow'></div>","<div class='left_arrow arrow'></div>","<div class='right_arrow arrow'></div>","<div class='content' style='color:#010101;'>"+header+$(content_elm).html()+"</div>","<div style='clear:both'></div>","<div class='down_arrow arrow'></div>","</div>"].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));

이 질문에 댓글 쓰기 :

답변 1


<!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;}
        .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
            $(".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);
            });
            // 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="http://www.google.com" title="구글사이트">Company</a>의 교육 과목으로는 C/C++, 웹표준,
        모바일웹 앱, javascript/jQuery가 있으며, 프로그램밍을 전문으로 하여
        초보에서 전문가까지 쉽고 빠르게 현장에서 충분한 능력을 펼칠수 있도록
        최선의 교육을 지향하고 있습니다-<a class="link2" href="http://www.google.com" title="구글사이트">Company</a>
    </p>
    <div class="tooltip">
        <h3>상세주소</h3>
        <strong>찾아오시는 길</strong>:<br/>
        <em>서울시 강남구 역삼동 123-456 D빌딩 10층</em>
    </div>
 </body>
</html>

 

이거 응용해보세요 ㅎㅎ

답변을 작성하시기 전에 로그인 해주세요.
전체 0 | RSS
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT