tooltip (툴팁 만들기)
#1. js 툴팁
#2. css 툴팁
#3. bootstrap 툴팁
디자인이 상관없다면 bootstrap을 이용하는게 제일 간편한거같다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
<title>Tooltip</title>
</head>
<body>
<button class="btn btn-primary btn-lg">ToolTip1<span>JS ToolTip</span></button>
<button class="btn btn-success btn-lg" data-tooltip="CSS ToolTip">ToolTip2</button>
<button class="btn btn-danger btn-lg" data-toggle="tooltip" data-placement="top" title="Bootstrap ToolTip">ToolTip3</button>
<script src="./app.js"></script>
</body>
</html>
js
const toolBtn = document.querySelectorAll('.btn');
toolBtn.forEach(_btn => {
if (_btn.childNodes.length > 1) {
_btn.addEventListener('mouseover', (e) => {
e.target.childNodes[1].classList.add('active');
});
_btn.addEventListener('mouseout', (e) => {
e.target.childNodes[1].classList.remove('active');
});
}
})
// bootstrap
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.btn {
margin:0 15px;
position: relative;
}
.btn > span {
display: none;
opacity: 0;
}
.btn > span.active {
display: inline-block;
position: absolute;
bottom: 100%;
left: 50%;
height: 50px;
padding: 7px 0;
transform: translate(-50%, -50%);
background-color: #000;
width: 200px;
border-radius: 3px;
opacity: 1;
}
[data-tooltip]:hover {
position: relative;
}
[data-tooltip]:hover:after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
height: 50px;
left: 50%;
padding: 7px 0;
transform: translate(-50%, -50%);
background-color: #000;
width: 200px;
border-radius: 3px;
opacity: 1;
background-color: #000;
}
'JavaScript > Vanilla JS' 카테고리의 다른 글
| Array.pop(), shift() (배열 제거) (0) | 2021.04.04 |
|---|---|
| for of, for in 차이, break, continue (반복문) (0) | 2021.03.28 |
| Array.splice() (배열 삭제 및 추가) (0) | 2021.03.26 |
| Array.some() (배열내에 요소 찾기) (0) | 2021.03.25 |
| Array.from (객체 복사 및 생성) (0) | 2021.03.23 |