부트스트랩 툴팁
Bootstrap Tooltip 플러그인
Tooltip은 링크를 설명할 때 매우 유용합니다. 도구 설명 플러그인은 Jason Frame이 작성한 jQuery.tipsy에서 영감을 받았습니다. 예를 들어, 도구 설명 플러그인은 이미지에 의존할 필요가 없지만 대신 CSS를 사용하여 애니메이션 효과를 얻고 데이터 속성을 사용하여 제목 정보를 저장합니다.
이 플러그인의 기능을 별도로 참조하려면 tooltip.js를 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.
Usage
도구 설명 플러그인은 필요에 따라 콘텐츠와 마크업을 생성합니다. 기본적으로 도구 설명은 트리거 요소 뒤에 배치됩니다. 다음 두 가지 방법으로 툴팁을 추가할 수 있습니다.
데이터 속성을 통해 : 툴팁을 추가하려면 앵커 태그에 data-toggle="tooltip"을 추가하기만 하면 됩니다. 앵커의 제목은 도구 설명의 텍스트입니다. 기본적으로 플러그인은 툴팁을 상단에 배치합니다.
<a href="#" data-toggle="tooltip" title="Example tooltip">제 위로 마우스를 가져가세요</a>
JavaScript를 통해 툴팁을 트리거하세요. JavaScript:
$('#identifier').tooltip(options)
도구 설명 플러그인은 이전에 설명한 드롭다운 메뉴 및 기타 플러그인과 다르며 Pure CSS 플러그인이 아닙니다. 플러그인을 사용하려면 jquery(javascript 읽기)를 사용하여 활성화해야 합니다. 다음 스크립트를 사용하여 페이지의 모든 도구 설명을 활성화합니다. $(function () { $("[data-toggle='tooltip']").tooltip(); });Example
다음 예에서는 데이터 속성을 통한 도구 설명 플러그인 사용을 보여줍니다.
Instance
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 提示工具（Tooltip）插件</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/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="tooltip"
data-placement="left" title="左侧的 Tooltip">
左侧的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top"
title="顶部的 Tooltip">
顶部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom"
title="底部的 Tooltip">
底部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" 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="tooltip"
data-placement="left" title="左侧的 Tooltip">
左侧的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="顶部的 Tooltip">
顶部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom" title="底部的 Tooltip">
底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="right" title="右侧的 Tooltip">
右侧的 Tooltip
</button>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Options
Bootstrap Data API를 통해 추가되거나 JavaScript를 통해 호출되는 몇 가지 옵션이 있습니다. 옵션은 다음 표에 나열되어 있습니다.
| 옵션 이름 | 유형/기본값 | 데이터 속성 이름 | Description |
|---|---|---|---|
| animation | boolean 기본값: true | 데이터 애니메이션 | 프롬프트 도구는 CSS 그라데이션 필터 효과를 사용합니다. |
| html | boolean 기본값: false | data-html | HTML을 툴팁에 삽입하세요. false인 경우 jQuery의 텍스트 메서드를 사용하여 dom에 콘텐츠를 삽입합니다. XSS 공격이 우려된다면 텍스트를 사용하세요. |
| placement | string|function 기본값: top | data-placement | 툴팁 위치 지정 방법을 지정합니다(예: 위쪽|아래쪽|왼쪽|오른쪽|자동). auto로 지정하면 툴팁이 동적으로 조정됩니다. 예를 들어 배치가 "자동 왼쪽"인 경우 툴팁은 가능하면 왼쪽에 표시되고, 상황이 허용하지 않는 경우 오른쪽에 표시됩니다. |
| selector | string Default: false | data-selector | 선택기가 제공되면 툴팁 개체가 지정된 대상에 위임됩니다. |
| title | string | function 기본값: '' | data-title | title 속성을 지정하지 않으면 제목 옵션이 기본 제목 값이 됩니다. |
| trigger | string 기본값: 'hover focus' | data-trigger | 툴팁 트리거 방법 정의: | hover | manual을 클릭하세요. 각각 공백으로 구분된 여러 트리거를 전달할 수 있습니다. |
| content | string | function 기본값: '' | data-content | data-content 속성을 지정하지 않으면 기본 콘텐츠 값이 사용됩니다. |
| delay | number | object 기본값: 0 | data-delay | 툴팁 표시 및 숨기기를 지연하는 시간(밀리초) - 수동 트리거 유형에는 적용되지 않습니다. 숫자가 제공되면 표시 및 숨기기에 지연이 적용됩니다. 개체가 제공되면 구조는 다음과 같습니다. delay:
{ show: 500, hide: 100 } |
| container | string | false 기본값: false | data-container | 지정된 요소에 도구 설명을 추가합니다. 예: 컨테이너: 'body' |
Methods
다음은 도구 설명 플러그인의 몇 가지 유용한 방법입니다.
| Method | Description | Instance |
|---|---|---|
| 옵션: .tooltip(options) | 컬렉션에 팁 추가 요소 도구 핸들 . | $().tooltip(options) |
| 토글: .tooltip('toggle') | 툴팁을 전환하여 요소를 표시하거나 숨깁니다. | $('#element').tooltip('toggle') |
| Show: .tooltip('show') | 요소의 툴팁을 표시합니다. | $('#element').tooltip('show') |
| 숨기기: .tooltip('hide') | 요소에 대한 툴팁을 숨깁니다. | $('#element').tooltip('hide') |
| Destroy: .tooltip('destroy') | 요소를 숨기고 파괴하기 위한 팁 도구입니다. | $('#element').tooltip('destroy') |
Example
다음 예에서는 Tooltip 플러그인 방법의 사용법을 보여줍니다.
Instance
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 提示工具（Tooltip）插件方法</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">
这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"
title="show">Tooltip 方法 show
</a>.
这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip"
data-placement="left" title="hide">Tooltip 方法 hide
</a>.
这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip"
data-placement="top" title="destroy">Tooltip 方法 destroy
</a>.
这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip"
data-placement="bottom" title="toggle">Tooltip 方法 toggle
</a>.
<br><br><br><br><br><br>
<p class="tooltip-options" >
这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2
</h2>">Tooltip 方法 options
</a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });
});
</script>
<div>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
Events
다음 표에는 도구 설명 플러그인에 사용되는 이벤트가 나열되어 있습니다. 이러한 이벤트는 함수의 후크로 사용될 수 있습니다.
| Event | Description | Instance |
|---|---|---|
| show.bs.tooltip | 이 이벤트는 show 인스턴스 메소드가 호출되는 즉시 트리거됩니다. | $('#myTooltip').on('show.bs.tooltip', function () {
// 执行一些动作...
}) |
| shown.bs.tooltip | 이 이벤트는 툴팁이 사용자에게 표시될 때 트리거됩니다(CSS 전환 효과가 완료될 때까지 기다립니다). | $('#myTooltip').on('shown.bs.tooltip', function () {
// 执行一些动作...
}) |
| hide.bs.tooltip | 이 이벤트는 hide 인스턴스 메소드가 호출되는 즉시 트리거됩니다. | $('#myTooltip').on('hide.bs.tooltip', function () {
// 执行一些动作...
}) |
| hidden.bs.tooltip | 이 이벤트는 툴팁이 사용자에게 숨겨질 때 트리거됩니다(CSS 전환 효과가 완료될 때까지 기다립니다). | $('#myTooltip').on('hidden.bs.tooltip', function () {
// 执行一些动作...
}) |
Example
다음 예는 도구 설명 플러그인 이벤트의 사용법을 보여줍니다.
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 提示工具（Tooltip）插件事件</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<h4>提示工具（Tooltip）插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"
title="默认的 Tooltip">默认的 Tooltip
</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})});
</script>
</body>
</html>인스턴스 실행»
온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
