jquery tooltip position 질문 채택완료

ㅁㅇㅁㅇㅁㅇ 7년 전 조회 4,421

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

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

jquery.tooltip.js에서 건드는거 같은데..

어디를 건드려야 하나요??

#자바스크립트 #제이쿼리

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

정렬:

채택된 답변

+20 포인트

humanb2box

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년 전

제가 다른 방법으로 하긴 했지만 감사합니다 ㅎㅎ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

jquery tooltip position 질문 채택완료

답변 1개

답변에 대한 댓글 1개

공유하기