English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 툴팁(Tooltip) 플러그인

링크를 설명할 때 툴팁(Tooltip)은 매우 유용합니다. 툴팁(Tooltip) 플러그인은 Jason Frame 에 의해 작성되었습니다： jQuery.tipsy 의 영감을 받아, 툴팁(Tooltip) 플러그인은 이미지에 의존하지 않고 CSS를 사용하여 애니메이션 효과를 구현하고, 타이틀 정보를 data 속성으로 저장하는 등 많은 개선이 이루어졌습니다。

특정 플러그인 기능을 단독으로 참조하고자 한다면, 다음을 참조해야 합니다： tooltip.js또는 Bootstrap 플러그인 개요 제1장에서 설명된 것처럼, 다음과 같이 참조할 수 있습니다： bootstrap.js 또는 압축된 버전의 bootstrap.min.js。

사용법

툴팁(Tooltip) 플러그인은 요구 사항에 따라 내용과 표시를 생성하며, 기본적으로 툴팁(tooltip)을 트리거 요소 뒤에 배치합니다. 툴팁(tooltip)을 추가할 수 있는 두 가지 방법이 있습니다：

  • data 속성을 통해：도구 툴킷(tooltip)을 추가하려면 단순히 하나의 앵커 태그에 data-toggle="tooltip" 이렇게 하면 됩니다. 임베디드의 title은 툴킷(tooltip)의 텍스트입니다. 기본적으로, 플러그인은 툴킷(tooltip)을 상단에 설정합니다。

    这是一个-toggle="tooltip" title="예제 tooltip">위에 마우스를 올려 놓으세요</a>

  • JavaScript를 통해：JavaScript를 통해 툴킷을 트리거합니다：

    $('#identifier').tooltip(options)

도구 툴킷(Tooltip) 플러그인은 이전에 논의된 드롭다운 메뉴 및 다른 플러그인과 달리, pure CSS 플러그인이 아닙니다. 이 플러그인을 사용하려면 jQuery를 사용하여 활성화해야 합니다(JavaScript를 읽습니다). 페이지에서 모든 도구 툴킷(tooltip)을 활성화하기 위한 다음 스크립트를 사용하세요:

$(function　()　{　$("[data-toggle='tooltip']").tooltip();　});

온라인 예제

아래의 예제는 data 속성을 사용하여 도구 툴킷(Tooltip) 플러그인의 사용법을 보여줍니다。

온라인 예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　도구 툴킷(Tooltip) 플러그인</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>도구 툴팁(Tooltip) 플러그인　-　고정점</h4>
이것은　<a　href="#"　class="tooltip-test" data-toggle="tooltip" title="기본의 Tooltip">기본의 Tooltip</a>.
이것은　<a　href="#"　class="tooltip-test" data-toggle" data-placement="left" title="왼쪽의 Tooltip">왼쪽의 Tooltip</a>.
이것은 <a href="#" data-toggle" data-placement="top" title="상단의 Tooltip">상단의 Tooltip</a>.
이것은 <a href="#" data-toggle" data-placement="bottom" title="하단의 Tooltip">하단의 Tooltip</a>.
이것은 <a href="#" data-toggle" data-placement="right" title="오른쪽의 Tooltip">오른쪽의 Tooltip</a>
<br>
<h4>도구 툴팁(Tooltip) 플러그인　-　버튼</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="기본의 Tooltip">　기본의 Tooltip</button>
<button type="button" class="btn btn-default" data-toggle" data-placement="left" title="왼쪽의 Tooltip">왼쪽의 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle" data-placement="top" title="상단의 Tooltip">상단의 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle" data-placement="bottom" title="하단의 Tooltip">하단의 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle" data-placement="right" title="오른쪽의 Tooltip">오른쪽의 Tooltip</button>
<script>
	$(function　()　{　$("[data-toggle='tooltip']").tooltip();　});
</script>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같습니다：

옵션

일부 옵션은 Bootstrap 데이터 API(Bootstrap Data API)를 통해 추가되거나 JavaScript를 통해 호출됩니다. 다음 표는 이러한 옵션을 나열합니다：

옵션 이름타입/기본 값데이터 속성 이름설명
animationboolean
기본 값: true		data-animation툴팁이 CSS 변화 지연 필터 효과를 사용합니다。
htmlboolean
기본 값: false		data-htmlHTML을 툴팁에 삽입합니다. false라면, jQuery의 text 메서드가 DOM에 내용을 삽입하는 데 사용됩니다. XSS 공격에 대한 우려가 있으면 text를 사용하세요。
placementstring|function
기본 값: top		data-placement툴팁을 정위치하는 방법을 지정합니다(즉, top|bottom|left|right|auto).
지정된 경우 auto 이 때, 툴팁은 동적으로 조정됩니다. 예를 들어, placement이 "auto left"인 경우, 툴팁은 가능한 한 왼쪽에 표시되며, 상황이 허용되지 않는 경우에야 오른쪽에 표시됩니다。
selectorstring
기본 값: false		data-selector선택자가 제공되면, 툴팁 객체는 지정된 목표에 위임됩니다。
titlestring | function
기본 값: ''		data-title지정되지 않았을 경우 title 속성이 지정된 경우, title 옵션은 기본 title 값입니다。
triggerstring
기본 값: 'hover focus'		data-trigger툴팁을 트리거하는 방법을 정의합니다： click| hover | focus | manual。여러 트리거를 전달할 수 있으며, 각 트리거는 공백으로 구분됩니다。
delaynumber | object
기본 값: 0		data-delay툴팁을 표시 및 숨기는 지연 시간(밀리초) - manual 수동 트리거 유형에 적용되지 않습니다. 숫자를 제공된다면, 지연은 표시 및 숨기기에 적용됩니다. 객체를 제공한다면, 다음과 같은 구조로 되어 있습니다：
delay:
{　show:　500,　hide:　100　}
containerstring | false
기본 값: false		data-container지정된 요소에 툴팁 도구를 추가합니다。
예제： container: 'body'

메서드

다음은 툴팁(Tooltip) 플러그인에서 유용한 메서드들입니다：

메서드설명예제
Options: .tooltip(options)요소 집합에 툴팁 도구 핸들러를 추가합니다.
$().tooltip(options)
$().tooltip(options) Toggle:.tooltip('toggle')/.tooltip('hide')
표시 여부를 전환합니다
$('#element').tooltip('toggle') Show:.tooltip('show')
요소의 툴팁을 표시합니다。
$('#element').tooltip('show') Hide:.tooltip('hide')
요소의 툴팁을 숨깁니다。
$('#element').tooltip('hide') Destroy:.tooltip('destroy')
요소의 툴팁을 숨기고 파괴합니다。

온라인 예제

$('#element').tooltip('destroy')

온라인 예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　아래의 예제는 도구 툴팁(Tooltip) 플러그인 메서드의 사용법을 보여줍니다./title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
도구 툴팁(Tooltip) 플러그인 메서드<　10<div style="padding:　10<div style="padding:　100px
	options">　
	placement="top" title="destroy">Tooltip 메서드 destroy<-show"　data-px;">/a>.
	options">　
	placement="top" title="destroy">Tooltip 메서드 destroy<-toggle="tooltip" title="show">Tooltip 메서드 show<-toggle" data-hide" data/a>.
	options">　
	placement="top" title="destroy">Tooltip 메서드 destroy<-placement="left" title="hide">Tooltip 메서드 hide<-toggle" data-destroy" data/a>.
	options">　
	placement="top" title="destroy">Tooltip 메서드 destroy<-<a href="#" class="tooltip-toggle" data-toggle="tooltip" data/a>.
	placement="bottom" title="toggle">Tooltip 메서드 toggle<
	<br><br><br><br><br><br>-<p class="tooltip
		options">　
		这是一个-<a href="#" data2toggle="tooltip" title="<h2　</h2'am Header/a>.
	</>">Tooltip 메서드 options<
	<script>
		$(function　()　{　$('.tooltip-show').tooltip('show');});
		$(function　()　{　$('.tooltip-p>
		$(function　()　{　$('.tooltip-hide').tooltip('hide');});
		$(function　()　{　$('.tooltip-destroy').tooltip('destroy');});
		$((function () { $(".tooltip toggle").tooltip('toggle');});-$("options a").tooltip({html: true});});
	</script>
</div>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같습니다：

이벤트

아래 테이블은 툴팁 도구(Tooltip) 플러그인에서 사용할 이벤트를 나열합니다. 이 이벤트는 함수에서 힌트로 사용할 수 있습니다.

이벤트설명예제
show.bs.tooltipshow 예제 메서드를 호출할 때 즉시 이 이벤트가 발생합니다.
$('#myTooltip').on('show.bs.tooltip', function () {
　　//　일부 작업을 수행...
}
shown.bs.tooltip툴팁 도구가 사용자에게 보이면 이 이벤트가 발생합니다(CSS 트랜지션 효과가 완료될 때까지 기다립니다).
$('#myTooltip').on('shown.bs.tooltip', function () {
　　//　일부 작업을 수행...
}
hide.bs.tooltiphide 예제 메서드를 호출할 때 즉시 이 이벤트가 발생합니다.
$('#myTooltip').on('hide.bs.tooltip', function () {
　　//　일부 작업을 수행...
}
hidden.bs.tooltip툴팁 도구가 사용자에게 숨겨지면 이 이벤트가 발생합니다(CSS 트랜지션 효과가 완료될 때까지 기다립니다).
$('#myTooltip').on('hidden.bs.tooltip', function () {
　　//　일부 작업을 수행...
}

온라인 예제

아래 예제는 툴팁 도구(Tooltip) 플러그인 이벤트의 사용법을 보여줍니다。

온라인 예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　도구 툴팁(Tooltip) 플러그인 이벤트</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>도구 툴팁(Tooltip) 플러그인　-　고정점</h4>
이것은　<a　href="#"　class="tooltip-show"　data-toggle="tooltip"　
	title="기본적인 툴팁">기본적인 툴팁
</a>.
<script>
$(function　()　{　$('.tooltip-show').tooltip('show');});
$(function　()　{　$('.tooltip-$('function () { $('.tooltip
	alert("Alert message on show");
})});
</script>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같습니다：

Bootstrap 팝업 플러그인Bootstrap 탭 플러그인