in English

툴팁

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

개요

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

  • 툴팁은 위치 지정을 위해 타사 라이브러리 Popper 에 의존합니다 . 도구 설명이 작동하려면 bootstrap.js 전에 popper.min.js 를 포함 하거나 Popper가 포함된 bootstrap.bundle.min.js/ bootstrap.bundle.js를 사용해야 합니다!
  • 소스에서 JavaScript를 빌드하는 경우util.js .
  • 툴팁은 성능상의 이유로 선택되어 있으므로 직접 초기화해야 합니다 .
  • 길이가 0인 제목이 있는 도구 설명은 표시되지 않습니다.
  • container: 'body'더 복잡한 구성 요소(예: 입력 그룹, 버튼 그룹 등)에서 렌더링 문제를 방지하려면 지정 합니다.
  • 숨겨진 요소에 대한 툴팁 트리거는 작동하지 않습니다.
  • .disabled또는 요소 에 대한 도구 설명 disabled은 래퍼 요소에서 트리거되어야 합니다.
  • 여러 줄에 걸쳐 있는 하이퍼링크에서 트리거되면 도구 설명이 중앙에 표시됩니다. 이 동작을 방지 하려면 white-space: nowrap;에 사용하십시오.<a>
  • 도구 설명은 해당 요소가 DOM에서 제거되기 전에 숨겨야 합니다.
  • Shadow DOM 내부의 요소 덕분에 툴팁이 트리거될 수 있습니다.
기본적으로 이 구성 요소는 명시적으로 허용되지 않는 HTML 요소를 제거하는 내장 콘텐츠 새니타이저를 사용합니다. 자세한 내용은 JavaScript 설명서의 새니타이저 섹션 을 참조하세요.
이 구성 요소의 애니메이션 효과는 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의 오프셋 문서 를 참조하십시오 .
대체 게재위치 문자열 | 정렬 '튀기다' Popper가 대체에 사용할 위치를 지정할 수 있습니다. 자세한 내용은 Popper의 행동 문서 를 참조하십시오.
커스텀 클래스 문자열 | 기능 ''

도구 설명이 표시되면 클래스를 추가합니다. 이러한 클래스는 템플릿에 지정된 클래스 외에 추가됩니다. 여러 클래스를 추가하려면 공백으로 구분합니다 'a b'.

추가 클래스 이름을 포함하는 단일 문자열을 반환해야 하는 함수를 전달할 수도 있습니다.
경계 문자열 | 요소 '스크롤 부모' 도구 설명의 오버플로 제약 조건 경계입니다. 'viewport', 'window', 'scrollParent', 또는 HTMLElement 참조 값을 허용합니다 (JavaScript만 해당). 자세한 내용은 Popper의 preventOverflow 문서 를 참조하세요 .
살균하다 부울 진실 살균을 활성화하거나 비활성화합니다. 활성화되면 옵션 'template'이 'title'삭제됩니다. JavaScript 문서의 새니타이저 섹션을 참조하십시오 .
화이트리스트 물체 기본값 허용된 속성 및 태그가 포함된 개체
살균 널 | 기능 없는 여기에서 자신만의 살균 기능을 제공할 수 있습니다. 이는 삭제를 수행하기 위해 전용 라이브러리를 사용하려는 경우에 유용할 수 있습니다.
팝퍼 구성 널 | 물체 없는 Bootstrap의 기본 Popper 구성을 변경하려면 Popper의 구성 을 참조하십시오.

개별 툴팁의 데이터 속성

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

행동 양식

비동기식 메서드 및 전환

모든 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...
})