JS 툴팁 (tooltip.js)
툴팁 플러그인은 사용자가 요소 위에 마우스 포인터를 이동할 때 나타나는 작은 팝업 상자입니다.
툴팁에 대한 자습서를 들어, 우리의 읽기 Bootstrap Tooltip 자습서 .
통해 data-* 속성
data-toggle="tooltip" 툴팁을 활성화합니다.
title 속성은 툴팁 안에 표시해야 할 텍스트를 지정합니다.
자바 스크립트를 통해
툴팁은 CSS 전용 플러그인되지 않으며, 따라서 jQuery를 사용하여 초기화해야 지정된 요소를 선택하고 전화 tooltip() 메소드를.
예
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
»그것을 자신을 시도 도움말 옵션
옵션 데이터 속성이나 자바 스크립트를 통해 전달 될 수 있습니다. 데이터 속성의 경우에 옵션 이름을 추가 data- 같이 data-placement="" .
| 이름 | 유형 | 태만 | 기술 | 시도 해봐 |
|---|---|---|---|---|
| animation | boolean | true | 표시 및 도구 설명을 숨기는 경우 CSS 페이드 전환 효과를 추가할지 여부를 지정합니다
| 시도 해봐 |
| 컨테이너 | 문자열 또는 부울 거짓 | 그릇된 | 특정 요소에 도구 설명을 추가합니다. 예 : 컨테이너 : 'body' | 시도 해봐 |
| delay | number, or object | 0 | 그것을 표시하고 도구 설명을 숨기는 데 걸리는 시간 (밀리 초)을 지정합니다. 오브젝트 구조를 사용, 보여주기위한 지연과 숨어있는 또 다른 하나를 지정하려면 : delay: {show: 500, hide: 100} - 쇼 500 밀리 초를 취할 것 tooltip 있지만 100 밀리 그것을 숨길 | 시도 해봐 |
| html | boolean | false | 툴팁에 HTML 태그를 허용할지 여부를 지정합니다 :
거짓 (기본값)로 설정하면, jQuery's text() 방법이 사용됩니다. 당신이 XSS 공격에 대해 걱정하는 경우에 사용 | 시도 해봐 |
| placement | string | "top" | 툴팁의 위치를 지정합니다. 가능한 값 :
| 시도 해봐 |
| selector | string, or the boolean false | false | 지정된 셀렉터에 툴팁을 추가 | 시도 해봐 |
| template | string | 툴팁을 만들 때 기본 HTML은 사용할 수 있습니다. 툴팁의 제목은 클래스 갖는 요소에 삽입됩니다 .tooltip-inner 및 클래스를 가진 요소 .tooltip-arrow 툴팁의 화살표가 될 것이다. 최 래퍼 요소가 있어야 .tooltip 클래스. | ||
| title | string | "" | 툴팁 안에 표시해야 할 텍스트를 지정합니다 | 시도 해봐 |
| trigger | string | "hover focus" | 툴팁이 트리거 방법을 지정합니다. 가능한 값 :
| 시도 해봐 |
| viewport | string, or object | {selector: "body", padding: 0} | 이 요소의 경계 내에서 툴팁을 유지합니다. 예 : viewport: '#viewport' 또는 {selector: '#viewport', padding: 0} |
도구 설명 방법
다음 표는 사용 가능한 모든 도구 설명 방법을 보여줍니다.
| 방법 | 기술 | 시도 해봐 |
|---|---|---|
| .tooltip( options ) | 옵션으로 툴팁을 활성화합니다. 유효한 값은 위의 옵션을 참조하십시오 | 시도 해봐 |
| .tooltip("show") | 툴팁을 표시합니다 | 시도 해봐 |
| .tooltip("hide") | 툴팁을 숨 깁니다 | 시도 해봐 |
| .tooltip("toggle") | 툴팁을 전환 | 시도 해봐 |
| .tooltip("destroy") | 숨기고 툴팁을 파괴 | 시도 해봐 |
툴팁 이벤트
다음 표는 사용 가능한 모든 툴팁 이벤트를 보여줍니다.
| 행사 | 기술 | 시도 해봐 |
|---|---|---|
| show.bs.tooltip | 툴팁이 표시하려고 할 때 발생합니다 | 시도 해봐 |
| shown.bs.tooltip | 툴팁이 완전히 표시 될 때 발생합니다 (CSS 전환을 완료 한 후) | 시도 해봐 |
| hide.bs.tooltip | 툴팁 숨겨진하려고 할 때 발생합니다 | 시도 해봐 |
| hidden.bs.tooltip | 툴팁이 완전히 숨겨져 때 발생합니다 (CSS 전환을 완료 한 후) | 시도 해봐 |
예
사용자 지정 도구 설명 디자인
툴팁의 모양을 사용자 정의 CSS를 사용하여
예
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color:
#73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top >
.tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom
> .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left
> .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right
> .tooltip-arrow {
border-right: 5px solid black;
} »그것을 자신을 시도