코드펜 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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
1 2 3 4 5 6 7 8 9 10 11 | * {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
- 나머지는 기호에 맞게 설정합니다.
1 2 3 4 5 6 7 8 | #tip { position:absolute; color:#FFFFFF; padding:5px; display:none; background:#450e4c; border-radius: 5px;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | // 로직/* 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 삭제 });}); |
