BS3
Tooltip 소개
사용자가 마우스 포인터를 요소 위로 움직일 때 나타나는 작은 팝업 상자.
1.
클릭하면 나타나는 Popover(팝오버)와 유사하나,
Toolitp (툴팁)은 짧은 내용을 잠깐 보일 때 사용.
2.
아래 파일 중 하나 있어야 정상 작동.
개별: tooltip.js
통합: bootstrap.js (또는, bootstrap.min.js)
Tooltip 구문
<a href="#" data-toggle="tooltip" title="Homzzang.com">홈짱닷컴 주소</a>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
결과보기
[초기화 범위]
// data-toggle="tooltips" 속성 가진 모든 요소 초기화
$('[data-toggle="tooltip"]').tooltip();
// 특정요소만 초기화.
$('#myTooltip').tooltip();
※ 모든 tooltip은 해당 요소를 선택 후, jQuery tooltip() 함수로 초기화시켜야 함.
Tooltip 위치
<a href="#" data-toggle="tooltip" data-placement="top" title="Homzzang.com">홈짱닷컴</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Homzzang.com">홈짱닷컴</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Homzzang.com">홈짱닷컴</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Homzzang.com">홈짱닷컴</a>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
결과보기
※ Tooltip 위치는 data-placement 속성 이용해 변경 가능. (기본위치 : bottom)
※ data-placement 위치 속성값에 auto 값도 함게 사용 시 브라우저가 자동 결정.
(예: data-placement="auto left" 경우, 가능하면 왼쪽에 띄우고 그렇지 않으면 자동으로 띄움.)
Tooltip Option (옵션)
animation
Tooltip 표시하거나 숨길 때 CSS 페이드 전환 효과 추가 여부. (기본값: true)
true : 페이딩 효과 추가 O
false : 페이딩 효과 추가 X
container
지정 요소에 Tooltip 달기. (기본값: false) (예 : container: 'body')
string : 특정요소를 가리키는 문자열
false : 요소 지정 안 함.
delay
Tooltip을 표시하고 숨기는 데 걸리는 시간 (밀리 초) 지정.
number : milliseconds (밀리초) 나타내는 숫자.
object : show, hide 각각에 걸리는 밀리초를 적은 객체. (예) delay: {show: 500, hide: 100}
html
Tootip에 HTML 태그 허용할지 여부 지정. (기본값: false)
true : HTML 태그 허용 O
HTML은 title 속성에 (또는 title 옵션 사용해) 삽입.
false : HTML 태그 허용 X
jQuery의 text() 메소드 사용됨. XSS 공격에 안전.
placement
툴팁 위치 지정. (기본값: top)
"top" - 위
"bottom" - 아래.
"left" - 왼쪽.
"right" - 오른쪽
"auto" - 자동. (※ 위 4개 속성과 함께 사용 가능.)
(예1) "auto left" : 가능한 경우 툴팁이 왼쪽에 표시되고 그렇지 않으면 오른쪽에 표시.
(예2) "auto bottom" : 가능하면 맨 아래에 툴팁이 표시되고 그렇지 않으면 맨 위에 표시.
selector
Tooltip을 추가할 선택자.
string : 선택자를 가리키는 문자열.
false : 아무 선택자도 표시 안 함. (기본값)
template
Tooltip 만들 때 사용할 기본 HTML. (기본값: 없음) ※ 맨 아래 예제 참고
.tooltip 클래스 : 가장 바깥 쪽 감싸는 요소에 추가.
.tooltip-inner 클래스 : tooltip 제목
.tooltip-arrow 클래스 : Tooltip 화살표.
title
Tooltip 안에 표시할 텍스트. (기본값: 빈공백)
trigger
Tooltip 촉발되는 이벤트. (기본값: hover focus)
"click" - 요소 클릭할 때.
"hover" - 요소에 마우스커서 올릴 때.
"focus" - 요소 선택상태 때. (예) Tabbing (지정요소로 이동) 또는 Clicking(지정요소 클릭)할 때.
"manual" - 수동으로 촉발시킬 때.
팁 : 여러 값을 전달하려면 공백으로 구분. (예: hover focus)
viewport
Tooltip을 현재 요소 범위 내에 유지. (기본값: {selector : "body", padding : 0})
string : viewport 나타내는 문자열 (예) viewport: '#viewport'.
object : viewport 객체. (예) viewport: {selector : '#viewport', padding: 0}
Tooltip Method (메서드)
.tooltip(options)
옵션으로 툴팁 활성화. 유효값은 위 옵션 참조.
.tooltip("show")
툴팁 보이기.
.tooltip("hide")
툴팁 숨기기
.tooltip("toggle")
툴팁 토글 (= 보이기・숨기기 상호전환).
.tooltip("destroy")
툴팁 숨기고 삭제.
Tooltip Event (이벤트)
show.bs.tooltip
툴팁 표시 될 때 발생.
shown.bs.tooltip
툴팁 완전히 표시 될 때 발생. (CSS 전환 완료 후).
hide.bs.tooltip
툴팁을 숨기려고 할 때 발생.
hidden.bs.tooltip
툴팁이 완전히 숨겨져있을 때 발생. (CSS 전환 완료 후).
Tooltip Custom Design (디자인)
<style>
.hz + .tooltip > .tooltip-inner {
background-color: #73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 10px 15px;
font-size: 20px;
}
.hz + .tooltip.top > .tooltip-arrow {border-top: 5px solid green;}
.hz + .tooltip.bottom > .tooltip-arrow {border-bottom: 5px solid blue;}
.hz + .tooltip.left > .tooltip-arrow {border-left: 5px solid red;}
.hz + .tooltip.right > .tooltip-arrow {border-right: 5px solid black;}
</style>
<ul class="list-inline">
<li><a class="hz" href="#" data-toggle="tooltip" data-placement="top" title="Homzzang.com">Top</a></li>
<li><a class="hz" href="#" data-toggle="tooltip" data-placement="bottom" title="Homzzang.com">Bottom</a></li>
<li><a class="hz" href="#" data-toggle="tooltip" data-placement="left" title="Homzzang.com">Left</a></li>
<li><a class="hz" href="#" data-toggle="tooltip" data-placement="right" title="Homzzang.com">Right</a></li>
</ul>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
결과보기
