코드펜 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;
}
// 로직
/*
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 삭제
});
});
