안녕하세요. 명월입니다.
이 글은 Bootstrap에서 툴팁(tooltip)에 대한 글입니다.
툴팁(tooltip)은 말풍선으로써 도움말 같은 컨트롤입니다. 예를 들면, 버튼이나 그래프 등에 마우스를 올리면 해당 컨트롤의 설명이나 주의 사항, 상세 설명 등이 나오는 말풍선입니다.
링크 - https://getbootstrap.com/docs/3.4/javascript/#tooltips-usage
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- Bootstrap cdn 설정 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 버튼을 구성할 영역 설정-->
<div style="margin:10px;">
<!-- 태그로 툴팁을 사용하는 방법이다 -->
<!-- data-toggle에 tooltip 옵선을 설정한다. data-placement은 툴팁의 방향으로 top, bottom, left, right가 있다.-->
<!-- title에는 툴팁의 내용을 넣는다. -->
<button id="tooltip_btn" data-toggle="tooltip" data-placement="right" title="툴팁 예제입니다.">버튼</button>
<script>
// 툴팁을 실행하기 위해서 script에 tooltip함수를 실행해야 한다.
$(function(){
$('#tooltip_btn').tooltip({
// fade 효과 사용 여부
animation: true,
// 툴팁을 나타낼 특정 요소
container: false,
// 지연 설정
delay: {show:500, hide:100},
// 템필릿
html: false,
// html false 경우 지정할 요소 selector
selector: false,
// html true일 경우 사용되는 tooltip 템플릿
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
// 툴팁 트리거(반응) 이벤트
trigger: 'hover focus',
viewport: { selector: 'body', padding: 0 },
// 방향 (설정하면 요소의 data-placement 설정의 무효된다.)
//placement: 'bottom',
// 방향 (설정하면 요소의 title 설정의 무효된다.)
//title: '',
//sanitize: true,
//sanitizeFn: null,
//whiteList: ''
});
});
</script>
</div>
</body>
</html>
툴팁의 옵션은 아래와 같습니다.
| 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
| animation | boolean | true | 툴팁에 CSS fade 전환 적용 |
| container | string | false | false | 툴팁을 특정 요소에 추가합니다. 예 : container : "#id". 특정 요소에 툴팁을 배치할 수 있습니다. |
| delay | number | object | 0 | 툴팁의 표시와 숨기기를 나타내는 지연 설정을 할 수 있습니다. delay: { "show": 500, "hide": 100 } |
| html | boolean | false | 툴팁에 html의 사용여부. |
| placement | string | function | 'top' | 방향 설정 |
| selector | string | false | html이 false로 지정되면 selector로 tooltip의 구조를 설정할 수 있음. |
| template | string | 기본 | html이 true로 지정되면 사용. 툴팁을 만들 때 사용할 기본 HTML입니다. 툴팁 제목이 .tooltip-inner에 삽입됩니다. .tooltip-arrow는 툴팁의 화살표가됩니다. 가장 바깥 쪽 래퍼 요소에는 .tooltip 클래스가 있어야합니다. |
| title | string | function | '' | 툴팁 내용 |
| trigger | string | 'hover focus | 툴팁이 트리거되는 옵션 - click | hover | focus | manual. |
| viewport | string | object | function | { selector: 'body', padding: 0 } | 이 요소의 범위 내에서 툴팁을 유지합니다. 예 : 뷰포트 : '#viewport'또는 { "selector": "#viewport", "padding": 0} |
| sanitize | boolean | true | '템플릿'을 활성화하면 '콘텐츠'및 '제목'옵션이 삭제됩니다.(여기는 잘 모르겠네요..) |
| whiteList | object | ? | Bootstrap에서 사용되는 객체라는 데... 이것도 잘 모르겠네요. |
| sanitizeFn | null | function | null | sanitize가 true되면 실행되는 함수입니다. |
툴팁은 메소드와 이벤트도 있습니다.
메소드는 script로 툴팁을 제어하는 함수이고, 이벤트는 툴팁이 표시되거나 제거될 때 호출되는 함수입니다.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- Bootstrap cdn 설정 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<style>
/* 툴팁은 기본적으로 position이 absolute이기 때문에 초기화로 변형한다. */
#tooltip_area .tooltip {
position: initial!important;
}
</style>
<!-- 버튼을 구성할 영역 설정-->
<div style="margin:10px;">
<!-- 버튼을 누르면 툴팁이 나온다. -->
<button id="tooltip_btn">버튼</button>
<!-- 툴팁을 표시할 영역. -->
<div id="tooltip_area" style="border:1px solid;height:50px;">
</div>
<script>
$(function(){
$('#tooltip_btn').tooltip({
// fade 효과 설정
animation: true,
// 툴팁을 표시할 컨테이너 설정
container: "#tooltip_area",
// 툴팁 표시 틸레이
delay: {show:50, hide:10},
// template 사용한다.
html: true,
// 툴팁 template 내용은 tooltip-inner에 들어간다.
template: '<div class="tooltip" role="tooltip"><div class="tooltip-inner"></div></div>',
// 툴팁 내용.
title: '말 풍선',
// 툴팁 이벤트는 수동.
trigger: 'manual'
});
// 버튼 클릭 이벤트
$('#tooltip_btn').on("click", function(){
// toggle 함수는 툴팁이 show상태면 hide로 hide면 show를 실행한다.
// 함수의 종류는 show, hide, toggle있다.
$('#tooltip_btn').tooltip('toggle');
// destroy 함수도 존재하는데 이는 tooltip를 해제하는 함수이다.
});
// 툴팁 이벤트로 툴팁이 표시 되기 전의 이벤트이다.
$('#tooltip_btn').on('show.bs.tooltip', function () {
// 첫번째로 실행되는 이벤트
});
// 툴팁 이벤트로 툴팁이 표시 된 후의 이벤트이다.
$('#tooltip_btn').on('shown.bs.tooltip', function () {
// 세번째로 실행되는 이벤트
});
// 툴팁 이벤트로 툴팁이 비표시 되기 전의 이벤트이다.
$('#tooltip_btn').on('hide.bs.tooltip', function () {
// 네번째로 실행되는 이벤트
});
// 툴팁 이벤트로 툴팁이 비표시 된 후의 이벤트이다.
$('#tooltip_btn').on('hidden.bs.tooltip', function () {
// 다섯번째로 실행되는 이벤트
});
// 툴팁 이벤트로 툴팁이 template이 컨테이너에 들어간 후의 이벤트이다.
$('#tooltip_btn').on('inserted.bs.tooltip', function () {
// 두번째로 실행되는 이벤트
});
});
</script>
</div>
</body>
</html>
여기까지 Bootstrap에서 툴팁(tooltip)에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Open source > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 요소 고정(Affix) (0) | 2020.03.04 |
|---|---|
| [Bootstrap] 이미지 슬라이딩 컨트롤(carousel) (0) | 2020.03.03 |
| [Bootstrap] 팝오버(popover) (0) | 2020.03.02 |
| [Bootstrap] 탭 (Tab) (0) | 2020.02.28 |
| [Bootstrap] Panel과 Thumbnails, Card (0) | 2020.02.27 |
| [Bootstrap] 페이징(Paging)와 페이저(pager) (0) | 2020.02.26 |
| [Bootstrap] 드롭 다운(Dropdown) (0) | 2020.02.24 |
| [Bootstrap] Collapse(메뉴 접기, 펴기)를 사용하는 방법 (0) | 2019.12.01 |