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 |
댓글
이 글 공유하기
다른 글
-
Array.pop(), shift() (배열 제거)
Array.pop(), shift() (배열 제거)
2021.04.04 -
for of, for in 차이, break, continue (반복문)
for of, for in 차이, break, continue (반복문)
2021.03.28 -
Array.splice() (배열 삭제 및 추가)
Array.splice() (배열 삭제 및 추가)
2021.03.26 -
Array.some() (배열내에 요소 찾기)
Array.some() (배열내에 요소 찾기)
2021.03.25
댓글을 사용할 수 없습니다.