아래와 같은 방식으로 동작하는 말풍선(Tooltip)을 만들어 보고자한다.
-. 특정 영역 범위 안에서 마우스 포인터 따라 툴팁도 같이 따라 움직인다. 이때 마우스의 x좌표의 값을 툴팁에 보여준다.
-. 마우스 클릭(토글)에 의해 툴팁이 보였다 사라졌다 되도록 한다.
-. 툴팁의 모양은 화살표 모양이 아랫쪽으로 오는 형태, 마우스 윗쪽에 툴팁이 보이는 형태로 한다.
-. 툴팁이 나타났을 때 Esc 키를 치면 툴팁이 사라지게 한다.
<html>
<head>
<title>Tooltip과 마우스 이벤트</title>
<style>
/* 툴팁을 보여줄 영역의 크기를 적당히 잡는다. 높이를 250px로 잡음.
display를 inline-block으로 하게되면 이 영역안에 있는 글자의 길이만큼 width가 잡힌다.
만일 display: inline-block을 없애고 대신 width를 이용해서 가로 길이를 지정해도 된다.
만일 display: inline-block을 없애고 width 값도 없으면 가로 길이는 현재 화면 크기만큼으로 설정된다.
position: relative는 마우스와 툴팁이 어느 정도 간격으로 따라 다닐지를 지정하는데 사용
*/
.tooltip {
padding: 80px;
height: 250px;
background-color: #eeeeee;
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
/* 클래스명이 tootip인 엘리먼트 안에 클래스명 tooltiptext를 가진 엘리먼트를 지정한다.
아래는 한마디로 툴팁 박스 자체를 보이고자 하는 코드임
width: 110px은 툴팁 박스의 가로 크기를 지정, background-color: black은 툴팁 박스의 색상을 검정색으로
*/
.tooltip .tooltiptext {
visibility: hidden; /* 최초에는 툴팁 박스 안 보이게 */
width: 110px;
background-color: black;
color: #fff;
text-align: center; /*툴팁 박스 안의 글자가 가운데로 모이도록 */
border-radius: 6px; /* 툴팁 박스 모서리가 약간 둥글게 */
padding: 5px 5; /* 위아래 padding을 5 좌우 패딩을 5로 */
z-index: 55; /* 툴팁이 화면의 다른 요소들 위에 보이고 가려지지 않도록 하기 위해 */
position: absolute; /* 툴팁 박스의 위치 지정 방식 설정 */
left: 50%;
bottom: 77%;
margin-left: -60px; /* 툴팁 박스가 마우스 위치에 적당히 놓이도록 */
}
/* 툴팁 아래쪽 역 삼각형 형태의 화살표 모양 만들기. 개념은 상당히 웃기고 재미있다.
.tooltip .tooltiptext::after가 의미하는 바는 클래스명 tooltip 엘리먼트 안에있는
tooltiptext 엘리먼트 바로 뒤따라서(::before이면 바로 앞에) content가 지정하는 내용을 표시되게 하는데
아래의 경우는 content 내용이 없으므로 아무것도 보여주지 않는다.
대신에 border-width: 5px을 하면 작은 4각형이 생긴다.
그리고 border-color를 top right bottom left의 순으로 색상을 지정하는데 top의 색상을 black으로
나머지 right bottom left의 색상은 transparent으로 지정한다는 뜻인데 이렇게 지정하면
역삼각형 모양의 화살표가 생긴다. 개념 이해를 위해서 아래와 같이 해보면 알수 있다.
border-color: black red green cyan;
*/
.tooltip .tooltiptext::after {
content: "";
position: absolute;
color: green; /* content의 색깔*/
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
/* border-color의 Top Right Bottom Left의 색상 지정 */
border-color: black transparent transparent transparent;
/*border-color: black red blue cyan;*/
}
/* 아래 코드가 의미하는 것은 height를 250px로 잡았던 영역이 tootip이라는 이름의 div 영역인데
이 영역 위에 마우스가 hover하면 클래스명 tooltip 엘리먼트 안에 있는 클래스명
tooltiptext 엘리먼트를 보이라는 뜻. 즉 클래스명 tooltiptext가 툴팁 박스 자체인데
tootip이라는 클래스명을 가진 엘리먼트(여기서는 div) 영역위에 마우스가 hover하면
툴팁 박스를 보이라는 뜻임 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>Top tooltip과 mouse move event</h2>
<hr/>
<br/>
<!--툴팁을 보여줄 영역. css를 이용해서 이 영역의 크기를 적당히 잡는다.
클래스명 tooltip 영역은 마우스을 움직일 영역 클래스명 tooltiptext는 실제 툴팁 박스 자체-->
<div class="tooltip">회색 영역 안에서 (1)마우스 움직이기, (2)마우스 클릭하기를 해 보세요.
마우스 클릭시 마다 툴팁이 보였다 사라졌다 할거예요
<span class="tooltiptext">ID : 365</span>
</div>
<script>
//마우스를 움직일 때 툴팁을 보여줄 영역
var tooltip = document.getElementsByClassName("tooltip")[0];
//툴팁 박스
var tooltipTxt = document.getElementsByClassName("tooltiptext")[0];
// 아래 함수는 키보드 중 Esc 클릭시 툴팁이 사라지도록 하기
document.onkeydown = function(e){
var isEscape = false;
if("key" in e){
console.log("e.key : " + e.key);
isEscape = (e.key === "Escape" || e.key === "Esc");
} else {
isEscape = (e.keyCode === 27);
}
if(isEscape){
//툴팁 박스를 사라지게
tooltipTxt.style.display = "none";
}
};
//마우스 move 이벤트가 발생하면
tooltip.addEventListener('mousemove', function(e){
// console.log("e.clientX : "+e.clientX);
// console.log("e.clientY : "+e.clientY);
//e.clientX의 값이 현재 위치의 마우스 포인터의 x 좌표 값
//마우스를 움직이면 tooltipTxt(툴팁 박스)의 왼쪽 좌표를 마우스 포인터의 현재 x좌표로 지정
tooltipTxt.style.left = (e.clientX - 15) + 'px';
tooltipTxt.style.top = (e.clientY - 135) + 'px';
//툴팁 박스의 높이를 지정
tooltipTxt.style.height = "20px";
//툴팁 박스 안에 표시될 글자를 마우스의 현재 위치 x 좌표 값
tooltipTxt.innerHTML = "ID : " + e.clientX;
});
//마우스 클릭시마다 툴팁 박스가 보였다 사라졌다 하도록
tooltip.addEventListener('click', function(e){
if (tooltipTxt.style.display === 'none'){
tooltipTxt.style.display = "block";
console.log('툴팁이 보이지 않는 상태');
} else {
tooltipTxt.style.display = "none";
console.log('툴팁이 보이고 있음~');
}
});
</script>
</body>
</html>
'CSS' 카테고리의 다른 글
| CSS를 이용하여 테이블의 특정 column 보이지 않도록(hidden으로) 처리 하기 (0) | 2018.06.21 |
|---|---|
| CSS div의 크기 조정에 대해(div의 width, height 속성에 대해) (0) | 2015.11.18 |
| CSS line-height, letter-spacing, word-spacing 속성에 대해 (0) | 2015.11.11 |
| CSS text-align에 대해 (1) | 2015.11.11 |
| CSS에서 가상 클래스(pseudo class)를 이용하여 링크에 마우스 동작 감지하는 법 (0) | 2015.11.06 |