제이쿼리 ( JQuery ) 예제

custom tooltip

 

코드펜  https://codepen.io/gamza/pen/BrgEzg?editors=0010

 

▣ 구상

  - 툴팁 기능을 직접 디자인하기

  - 텍스트를 보여주는 툴팁 / 이미지를 보여주는 툴팁

 

 

▣ 조건

   mouseEnter 로 툴팁 생성

 ➋  mouseLeave 로 툴팁 삭제

   이미지 툴팁 / 텍스트 툴팁 구별하여 출력

 

 

▣ 준비

 · 툴팁에 들어갈 이미지 1장 ( 100px * 100px )

 

 

 

◆ 레이아웃 ( html, css )

 

 1.  텍스트( 게시물로서의 ) 를 입력합니다.

 2.  툴팁을 활성화 시키기 위해, mouseEnter 할 영역을 <a> 태그로 감쌉니다.

     필요에 따라 href 주소를 첨부하거나 "#" 으로 클릭 이벤트를 막습니다.

 3.  텍스트 툴팁을 생성하려는 <a> 의 title 속성에는 텍스트를 입력합니다.

 4.  이미지 툴팁을 생성하려는 <a> 의 title 속성에는 이미지의 경로를 입력하고

     class 속성을 "img" 로 작성합니다.

 5.  전체 레이아웃을 기호에 맞게 설정합니다.

● html 

<body>

    <div>
        <p>
            text
            <a href="#" title="툴팁으로 사용할 텍스트"> hover 할 텍스트1 </a>
            text
        </p>
        <p>
            text
            <a href="링크" title="이미지경로" class="img"> hover 할 텍스트2 </a>
            text
        </p>
    </div>
    
</body>

● css

* {padding:0px; margin:0px;}
body {
	margin: 35px auto;
	padding: 0;
	width: 380px;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
}
p {
	line-height:1.5; margin-bottom:6px;
}

 

 

◆ 기능( jquery )

 

 1.  제이쿼리를 통해 생성할 툴팁의 css 속성을 미리 지정합니다. ( #tip ) : 

      - 툴팁을 <a>요소 상단에 생성하기 위해 위치이동이 자유롭도록 만듭니다.

        ▶ position : absolute

      - fadeIn 효과를 위해, 보이지 않는 상태를 기본으로 설정합니다.

         display : none  

      - 나머지는 기호에 맞게 설정합니다.

#tip {
    position:absolute;
    color:#FFFFFF;
	padding:5px;
	display:none;
	background:#450e4c;
    border-radius: 5px;
}

 

● javascript
// 로직

/*
    mouseEnter 시 :
    1. 해당 요소의 "class" 속성을 검사
     - img 의 경우 "title" 에 저장된 내용을 툴팁에 들어갈 <img> 의 "src" 로 활용하여 툴팁 생성
     - 그 외의 경우 "title" 에 저장된 내용을 텍스트로 출력하는 툴팁 생성
    2. 해당 요소의 위치값을 이용하여 만든 X, Y 좌표를 사용해 툴팁의 생성위치를 결정
    
    mouseLeave 시 : 툴팁 삭제
*/

$(function(){    
    var title_;
    var class_;
    var imgTag;
    
    $("a").hover(function(e) {      // <a> hover 시 : mouseEnter
    
    	title_ = $(this).attr("title");     // title을 변수에 저장
    	class_ = $(this).attr("class");		// class를 변수에 저장
    	$(this).attr("title","");			// title 속성 삭제( 기본 툴팁 기능 방지 )
    
    	if(class_ == "img"){				// class_ 가 img라면, 
            // title_을 주소로 가진 <img>를 변수 imgTag에 저장
    		imgTag = "<img src='"+title_+"' width='100px' height:'100px' />";	
    	}
    
    	$("body").append("<div id='tip'></div>");	// body 내부에 div#tip 생성
        
    		// class_ 값에 따라 이미지 or 텍스트 출력 구분
    		if (class_ == "img") {
    			$("#tip").html(imgTag);
    			$("#tip").css("width","100px");
    		} else {
                $("#tip").css("width","300px");
    			$("#tip").text(title_);
    		}
            
            // 툴팁이 현재 hover 한 요소의 상단에 생성되도록 설정
    		var pageX = $(this).offset().left -20;
    		var pageY = $(this).offset().top - $("#tip").innerHeight();
    		$("#tip").css({left : pageX + "px", top : pageY + "px"}).fadeIn(500);
    
    }, function() {							// <a> hover 시 : mouseLeave
    
    	$(this).attr("title", title_);		// title 속성 반환
    	$("#tip").remove();					// div#tip 삭제
    
    });
});

댓글

댓글 본문
버전 관리
gamza
현재 버전
선택 버전
graphittie 자세히 보기