[basic] BS4 - Tooltip (BS툴팁 = BS말풍선 허버형)

1. Tooltip 소개
2. Tooltip 구문
3. Tooltip 위치
4. Tooltip Option (옵션)
5. Tooltip Method (메서드)
6. Tooltip Event (이벤트)
7. Tooltip Custom Design (커스텀 디자인)

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>

 

결과보기

---

PS. 부가 설명

 

1.

Tooltip 위치는 data-placement 속성 이용해 변경 가능. 

(기본위치 : bottom)

 

2.

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)

offset

target 기준으로 tooltip 오프셋 지정. BS4 추가.

옵션값 유형: number | string   (기본값: 0)

 

fallbackPlacement
대체 위치에서 popper가 사용할 위치 지정. BS4 추가.

옵션값 유형: string | "flip" 배열  (기본값: "flip")

 

boundary
툴팁의 overflow 제약 경계. BS4 추가. 
옵션값 유형: string | element  (기본값: "scrollParent")
string :  "viewport", "window", "scrollParent" 중 하나의 문자열.  (예) boundary:'viewport'
element : HTML 요소 중 하나.

 

주의: viewport 옵션은 BS4에서 제거됨.

 

Tooltip Method (메서드)

 

.tooltip(options)

옵션으로 툴팁 활성화. 유효값은 위 옵션 참조.

 

.tooltip("show")

툴팁 보이기.

 

.tooltip("hide")

툴팁 숨기기

 

.tooltip("toggle")

툴팁 토글 (= 보이기・숨기기 상호전환).

 

.tooltip("dispose")

툴팁 숨기고 삭제.   cf. BS3: .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>

 

결과보기