툴팁

애니메이션용 CSS3와 로컬 타이틀 저장용 데이터 속성을 사용하여 CSS 및 JavaScript로 사용자 정의 부트스트랩 툴팁을 추가하기 위한 문서 및 예제입니다.

개요

툴팁 플러그인을 사용할 때 알아야 할 사항:

툴팁은 위치 지정을 위해 타사 라이브러리 Popper.js 에 의존 합니다. 도구 설명이 작동하려면 bootstrap.js 전에 popper.min.js를 포함하거나 Popper.js 가 포함된 bootstrap.bundle.min.js/ bootstrap.bundle.js를 사용해야 합니다!
소스에서 JavaScript를 빌드하는 경우util.js .
툴팁은 성능상의 이유로 선택되어 있으므로 직접 초기화해야 합니다 .
길이가 0인 제목이 있는 도구 설명은 표시되지 않습니다.
container: 'body'더 복잡한 구성 요소(예: 입력 그룹, 버튼 그룹 등)에서 렌더링 문제를 방지하려면 지정 합니다.
숨겨진 요소에 대한 툴팁 트리거는 작동하지 않습니다.
.disabled또는 요소 에 대한 도구 설명 disabled은 래퍼 요소에서 트리거되어야 합니다.
여러 줄에 걸쳐 있는 하이퍼링크에서 트리거되면 도구 설명이 중앙에 표시됩니다. 이 동작을 방지 하려면 white-space: nowrap;에 사용하십시오.<a>
도구 설명은 해당 요소가 DOM에서 제거되기 전에 숨겨야 합니다.
Shadow DOM 내부의 요소 덕분에 툴팁이 트리거될 수 있습니다.

이 구성 요소의 애니메이션 효과는 prefers-reduced-motion미디어 쿼리에 따라 다릅니다. 접근성 설명서의 감소된 동작 섹션을 참조하십시오 .

다 알아? 좋습니다. 몇 가지 예를 들어 어떻게 작동하는지 봅시다.

예: 모든 곳에서 툴팁 활성화

페이지의 모든 툴팁을 초기화하는 한 가지 방법은 data-toggle속성별로 선택하는 것입니다.

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

예

툴팁을 보려면 아래 링크 위로 마우스를 가져갑니다.

아래 버튼 위로 마우스를 가져가면 위쪽, 오른쪽, 아래쪽 및 왼쪽의 4가지 도구 설명 방향이 표시됩니다.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

추가된 사용자 정의 HTML:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

용법

툴팁 플러그인은 요청 시 콘텐츠와 마크업을 생성하고 기본적으로 트리거 요소 뒤에 툴팁을 배치합니다.

JavaScript를 통해 도구 설명을 트리거합니다.

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

오버플 `auto`로 및`scroll`

overflow: auto도구 설명 위치는 상위 컨테이너가 우리와 같 거나 overflow: scroll같을 때 자동으로 변경하려고 시도 .table-responsive하지만 여전히 원래 배치의 위치를 유지합니다. 이 문제를 해결하려면 다음과 같이 옵션 boundary을 기본값이 아닌 다른 값으로 설정하십시오 .'scrollParent''window'

$('#example').tooltip({ boundary: 'window' })

마크업

툴팁에 필요한 마크업은 data속성 일 뿐이며 툴팁 title을 갖고자 하는 HTML 요소에 있습니다. top툴팁의 생성된 마크업은 위치가 필요하지만(기본적으로 플러그인에 의해 설정됨) 다소 간단합니다 .

키보드 및 보조 기술 사용자를 위한 도구 설명 만들기

전통적으로 키보드에 초점을 맞출 수 있고 대화형인 HTML 요소(예: 링크 또는 양식 컨트롤)에만 도구 설명을 추가해야 합니다. 속성을 추가하여 임의의 HTML 요소(예: <span>s)에 초점을 맞출 수 있지만 tabindex="0", 이는 키보드 사용자를 위해 비대화형 요소에 잠재적으로 성가시고 혼란스러운 탭 정지를 추가하며 현재 대부분의 보조 기술은 이 상황에서 툴팁을 알리지 않습니다. 또한 도구 설명에 대한 트리거로 전적으로 의존하지 마십시오. hover그러면 도구 설명이 키보드 사용자에게 트리거되지 않을 수 있습니다.

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

장애인 요소

속성이 있는 요소는 disabled대화형이 아니므로 사용자가 초점을 맞추거나 마우스를 올리거나 클릭하여 도구 설명(또는 팝오버)을 트리거할 수 없습니다. <div>이 문제를 해결하려면 래퍼 또는 <span>, 이상적으로는 를 사용하여 키보드에 초점을 맞출 수 있는 도구 설명을 트리거하고 비활성화된 요소를 tabindex="0"재정의해야 합니다 .pointer-events

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-animation="".

보안상의 이유로 데이터 속성을 사용하여 sanitize, sanitizeFn및 whiteList옵션을 제공할 수 없습니다.

이름	유형	기본	설명
생기	부울	진실	툴팁에 CSS 페이드 전환 적용
컨테이너	문자열 \| 요소 \| 거짓	거짓	특정 요소에 도구 설명을 추가합니다. 예: `container: 'body'`. 이 옵션은 문서의 흐름에서 트리거 요소 근처에 도구 설명을 배치할 수 있다는 점에서 특히 유용합니다. 이렇게 하면 창 크기 조정 중에 도구 설명이 트리거 요소에서 멀어지는 것을 방지할 수 있습니다.
지연	번호 \| 물체	0	툴팁 표시 및 숨기기 지연(ms) - 수동 트리거 유형에는 적용되지 않습니다. 숫자가 제공되면 숨기기/표시 모두에 지연이 적용됩니다. 개체 구조는 다음과 같습니다.`delay: { "show": 500, "hide": 100 }`
HTML	부울	거짓	툴팁에서 HTML을 허용합니다. true인 경우 툴팁의 HTML 태그가 툴팁 `title`에 렌더링됩니다. false인 경우 jQuery의 `text`메서드를 사용하여 DOM에 콘텐츠를 삽입합니다. XSS 공격이 걱정된다면 텍스트를 사용하세요.
놓기	문자열 \| 기능	'맨 위'	툴팁 위치 지정 방법 - 자동 \| 상단 \| 바닥 \| 왼쪽 \| 오른쪽. 가 지정 되면 `auto`툴팁의 방향이 동적으로 변경됩니다. 배치를 결정하는 데 함수가 사용되면 도구 설명 DOM 노드를 첫 번째 인수로 사용하고 트리거 요소 DOM 노드를 두 번째 인수로 사용하여 호출됩니다. 컨텍스트 는 `this`도구 설명 인스턴스로 설정됩니다.
선택자	문자열 \| 거짓	거짓	선택기가 제공되면 도구 설명 개체가 지정된 대상에 위임됩니다. 실제로 이것은 동적으로 추가된 DOM 요소( `jQuery.on`지원)에 툴팁을 적용하는 데에도 사용됩니다. 이것 과 유익한 예를 참조하십시오 .
주형	끈	`'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'`	도구 설명을 만들 때 사용할 기본 HTML입니다. 툴팁 `title`이 에 주입됩니다 `.tooltip-inner`. `.arrow`툴팁의 화살표가 됩니다. 가장 바깥쪽 래퍼 요소에는 `.tooltip`클래스 및 `role="tooltip"`.
제목	문자열 \| 요소 \| 기능	''	`title`속성이 없는 경우 기본 제목 값 입니다. 함수가 제공되면 `this`도구 설명이 첨부된 요소로 설정된 참조와 함께 호출됩니다.
방아쇠	끈	'포커스'	툴팁이 실행되는 방법 - 클릭 \| 호버 \| 초점 \| 수동. 여러 트리거를 전달할 수 있습니다. 공백으로 구분하십시오. `'manual'.tooltip('show')`도구 설명이 , `.tooltip('hide')`및 `.tooltip('toggle')`메서드 를 통해 프로그래밍 방식으로 트리거됨을 나타냅니다 . 이 값은 다른 트리거와 결합할 수 없습니다. `'hover'`그 자체로는 키보드를 통해 트리거할 수 없는 도구 설명이 나타나며 키보드 사용자에게 동일한 정보를 전달하는 대체 방법이 있는 경우에만 사용해야 합니다.
오프셋	번호 \| 문자열 \| 기능	0	대상을 기준으로 한 도구 설명의 오프셋입니다. 오프셋을 결정하기 위해 함수가 사용되면 오프셋 데이터를 첫 번째 인수로 포함하는 객체와 함께 호출됩니다. 함수는 동일한 구조의 객체를 반환해야 합니다. 트리거 요소 DOM 노드는 두 번째 인수로 전달됩니다. 자세한 내용은 Popper.js의 오프셋 문서 를 참조하세요 .
대체 게재위치	문자열 \| 정렬	'튀기다'	Popper가 대체에 사용할 위치를 지정할 수 있습니다. 자세한 내용은 Popper.js의 동작 문서 를 참조하세요.
경계	문자열 \| 요소	'스크롤 부모'	도구 설명의 오버플로 제약 조건 경계입니다. `'viewport'`, `'window'`, `'scrollParent'`, 또는 HTMLElement 참조 값을 허용합니다 (JavaScript만 해당). 자세한 내용은 Popper.js의 preventOverflow 문서 를 참조하세요 .
살균하다	부울	진실	살균을 활성화하거나 비활성화합니다. 활성화되면 옵션 `'template'`이 `'title'`삭제됩니다.
화이트리스트	물체	기본값	허용된 속성 및 태그가 포함된 개체
살균	널 \| 기능	없는	여기에서 자신만의 살균 기능을 제공할 수 있습니다. 이는 삭제를 수행하기 위해 전용 라이브러리를 사용하려는 경우에 유용할 수 있습니다.
팝퍼 구성	널 \| 물체	없는	Bootstrap의 기본 Popper.js 구성을 변경하려면 Popper.js의 구성 을 참조하세요.

개별 툴팁의 데이터 속성

개별 도구 설명에 대한 옵션은 위에서 설명한 대로 데이터 속성을 사용하여 대신 지정할 수 있습니다.

행동 양식

비동기식 메서드 및 전환

모든 API 메서드는 비동기식 이며 전환 을 시작합니다 . 전환이 시작되자마자 그러나 끝나기 전에 호출자에게 돌아갑니다 . 또한 전환 구성 요소에 대한 메서드 호출은 무시 됩니다.

자세한 내용은 JavaScript 설명서를 참조하십시오 .

`$().tooltip(options)`

도구 설명 처리기를 요소 컬렉션에 연결합니다.

`.tooltip('show')`

요소의 툴팁을 표시합니다. 툴팁이 실제로 표시 되기 전에(즉, shown.bs.tooltip이벤트가 발생하기 전에) 호출자에게 반환합니다. 이것은 툴팁의 "수동" 트리거로 간주됩니다. 길이가 0인 제목이 있는 도구 설명은 표시되지 않습니다.

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

`.tooltip('hide')`

요소의 툴팁을 숨깁니다. 툴팁이 실제로 숨겨 지기 전에(즉, hidden.bs.tooltip이벤트가 발생하기 전에) 호출자에게 반환됩니다. 이것은 툴팁의 "수동" 트리거로 간주됩니다.

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

`.tooltip('toggle')`

요소의 툴팁을 토글합니다. 툴팁이 실제로 표시되거나 숨겨 지기 전에(즉, shown.bs.tooltip또는 hidden.bs.tooltip이벤트가 발생하기 전에) 호출자에게 반환됩니다. 이것은 툴팁의 "수동" 트리거로 간주됩니다.

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

`.tooltip('dispose')`

요소의 툴팁을 숨기고 파괴합니다. 위임을 사용하는 도구 설명( 옵션 을 사용 하여selector 생성됨 )은 하위 트리거 요소에서 개별적으로 제거할 수 없습니다.

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

`.tooltip('enable')`

요소의 툴팁에 표시할 수 있는 기능을 제공합니다. 도구 설명은 기본적으로 활성화되어 있습니다.

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

`.tooltip('disable')`

요소의 툴팁이 표시되는 기능을 제거합니다. 툴팁은 다시 활성화된 경우에만 표시될 수 있습니다.

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

`.tooltip('toggleEnabled')`

요소의 툴팁을 표시하거나 숨길 수 있는 기능을 토글합니다.

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

`.tooltip('update')`

요소의 툴팁 위치를 업데이트합니다.

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

이벤트

이벤트 유형	설명
show.bs.tooltip	`show`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
표시됨.bs.tooltip	이 이벤트는 도구 설명이 사용자에게 표시될 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).
hide.bs.tooltip	`hide`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 시작됩니다 .
hidden.bs.tooltip	이 이벤트는 툴팁이 사용자에게 숨겨졌을 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).
insert.bs.tooltip	이 이벤트는 `show.bs.tooltip`툴팁 템플릿이 DOM에 추가되었을 때 이벤트 후에 시작됩니다.

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})

툴팁

개요

예: 모든 곳에서 툴팁 활성화

예

용법

오버플 auto로 및scroll

마크업

키보드 및 보조 기술 사용자를 위한 도구 설명 만들기

장애인 요소

옵션

개별 툴팁의 데이터 속성

행동 양식

비동기식 메서드 및 전환

$().tooltip(options)

.tooltip('show')

.tooltip('hide')

.tooltip('toggle')

.tooltip('dispose')

.tooltip('enable')

.tooltip('disable')

.tooltip('toggleEnabled')

.tooltip('update')

이벤트