tooltip은 일반적으로 :hover나 toggleClass()로 제어되는데, 플젝에 따라, show/hide 외 스크롤에 따른 액션이 요구될 때가 있다. tippy.js과 함께라면, 스크립트와의 싸움을 피할 수 있다.
tippy.js는 popper.js를 기반으로 업그레이드화된 플러그인으로, popper.js의 스크롤 액션이 default로 들어가 있다. 여기서 스크롤 액션이란, 예로, tooltip의 위치를 상단으로 설정(placement: 'top')하였을 때, 스크롤에 의해 tooltip이 안 보이게 될 시, 자동으로 tooltip의 위치를 아래로 내려준다. 또 스크롤을 올리면, 다시 상단으로 올려준다.
1. 플러그인 연결
<button class="클래스명">make tooltip!</button>
<script src="https://unpkg.com/@popperjs/core@2"></script><!-- tippy 사용 위찬 연결-->
<script src="https://unpkg.com/tippy.js@6"></script><!-- tippy 사용 위찬 연결-->
<script>
// tippy 설정
tippy('.클래스명', {
content: '툴팁 내용'
});
</script>2. tippy API 중
| placement | string | 'top' 'top-start' 'top-end' + 'right', 'bottom'. 'left', 'auto' |
tooltip 위치 지정 |
| offset | array | [0, 10] | 지정 위치에서, x축으로 0만큼, y축으로 10px만큼 이동 |
| theme | string | 'light', 'light-border', 'material', 'translucent' | 테마 지정. 값에 따라 해당 css 연결 필요. css link는 사이트 참고 커스텀 가능(아래 4. 커스텀 참고) |
| maxWidth | number | 250 | 최대넓이 지정 |
| arrow | true | 기본 화살표 표시 | |
| '<svg>..</svg>' | 커스텀 svg 연결 | ||
| svgElement | 커스텀 svg 요소 연결 | ||
| animation | string | 'shift-away', 'shift-toward', 'scale', 'perspective' | show/hide 애니메이션 지정, 값에 따라, 해당 css 연결 필요 커스텀 가능 |
| allowHTML | boolean | true | html tag 삽입 |
| delay | number | 0(default)/td> | 딜레이 되는 시간 |
| [100, null] | show되는 시점의 딜레이값은 100ms , hide는 0 | ||
| duration | number | 0(default) | show/hide의 애니메이션이 실행되는 시간 |
| [100, null] | show되는 시점의 애니메이션 시간100ms , hide는 0 | ||
| trigger hideOnClick |
string | 'click' 'toggle' |
클릭시, tooltip show/hide 커스텀 가능 |
| role | string | 'tooltip' | tooltip tag에 role 지정 |
| popperOption | object | { 옵션 삽입 } | popper.js의 옵션 사용용 |
All Props
The complete tooltip, popover, dropdown, and menu solution for the web
atomiks.github.io
3. Basic-Sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tippy</title>
<style>body{padding:20px 0 200px;text-align: center;}</style>
<!-- tippy animation: 'shift-away'용 css -->
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/shift-away.css"/>
</head>
<body>
<button class="btnTooltop" style="margin-top: 140px;">make tooltip!</button>
<script src="https://unpkg.com/@popperjs/core@2"></script><!-- tippy 사용 위한 연결-->
<script src="https://unpkg.com/tippy.js@6"></script><!-- tippy 사용 위한 연결-->
<script>
// tippy 설정
tippy('.btnTooltop', {
content: 'tippy.js', // tooltip 내용
placement: 'top', // 상단 위치
trigger: 'click', // :hover가 아닌 click시 노출
hideOnClick : 'toggle', // click시, toggle() 액션
animation: 'shift-away' // 아래에서 위로 올라오며 등장
});
</script>
</body>
</html>
4. Custom (커스텀)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tippy</title>
<style>
body{padding:20px 0 200px;text-align: center;}
/* tomato 테마 제작 */
.tippy-box[data-theme~='tomato'] {
background-color: tomato;
color: yellow;
}
.tippy-box[data-placement^=top]>.tippy-arrow:before{
border-top-color: tomato;
}
</style>
</head>
<body>
<button class="btnTooltop" style="margin-top: 140px;">make tooltip!</button>
<script src="https://unpkg.com/@popperjs/core@2"></script><!-- tippy 사용 위찬 연결-->
<script src="https://unpkg.com/tippy.js@6"></script><!-- tippy 사용 위찬 연결-->
<script>
// tippy 설정
tippy('.btnTooltop', {
content: 'tippy.js',
placement: 'top', // tooltip 상단 위치
theme: 'tomato', // tomato 테마 적용
});
</script>
</body>
</html>'javascript > library' 카테고리의 다른 글
| [slide] slick 아이템에 여백 추가하는 방법 How add spaces between Slick item (0) | 2021.10.23 |
|---|---|
| [slide] swiper v5부터 ie 미지원! (0) | 2021.01.16 |
| [slide] slick 사용법(+반응형) How to use slick.js (2) | 2021.01.10 |
| [slide] swiper 사용법(+반응형) (1) | 2021.01.10 |
댓글