• Q&A
  • 회원가입
  • 로그인

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

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>

 

결과보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012