매일매일 배워야 하는 부트스트랩 툴팁 플러그인_javascript 기술

링크를 설명할 때 툴팁은 매우 유용합니다. Tooltip 플러그인은 Jason Frame이 작성한 jQuery.tipsy에서 영감을 받았습니다. 예를 들어, 도구 설명 플러그인은 이미지에 의존할 필요가 없지만 대신 CSS를 사용하여 애니메이션 효과를 얻고 데이터 속성을 사용하여 제목 정보를 저장합니다.

이 플러그인의 기능을 별도로 참조하려면 tooltip.js를 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.
1. 사용법
도구 설명 플러그인은 요청 시 콘텐츠와 마크업을 생성합니다. 기본적으로 도구 설명은 트리거 요소 뒤에 배치됩니다. 다음 두 가지 방법으로 툴팁을 추가할 수 있습니다.

1. 데이터 속성을 통해: 툴팁을 추가해야 하는 경우 앵커 태그에 data-toggle="tooltip"을 추가하면 됩니다. 앵커의 제목은 도구 설명의 텍스트입니다. 기본적으로 플러그인은 툴팁을 상단에 설정합니다.

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

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

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

툴팁 플러그인은 이전에 논의한 드롭다운 메뉴 및 기타 플러그인과 같은 순수한 CSS 플러그인이 아닙니다. 플러그인을 사용하려면 jquery(javascript 읽기)를 사용하여 활성화해야 합니다. 페이지의 모든 도구 설명을 활성화하려면 다음 스크립트를 사용하세요.

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

2. 옵션
일부 옵션은 Bootstrap Data API를 통해 추가되거나 JavaScript를 통해 호출됩니다. 옵션은 아래 표에 나열되어 있습니다.

3. 툴팁

//基本实例

<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
//JS 部分需要声明

$('#section').tooltip();

도구 설명에는 다음과 같이 팁 표시를 구성하는 많은 속성이 있습니다.

<a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符"
 data-animation="false"
 data-html="true"
 data-placement="auto"
 data-selector="a[rel=tooltip]"
 data-trigger="click"
 data-delay="500"
 data-template="<b>123</b>"
>HTML5</a>

JavaScript 방식으로 이전 데이터를 직접 삭제할 수 있습니다. 포함 사항: 애니메이션, HTML, 배치, 선택기, 원본 제목, 제목, 트리거, 지연, 컨테이너 및 템플릿 속성.

//JavaScript 方式

$('#section a').tooltip({
 delay : {
  show : 500,
  hide : 100,
 },
 container : 'body'
}); 

JavaScript에는 표시, 숨기기, 전환 및 삭제의 네 가지 방법이 있습니다.

//显示
$('#section a').tooltip('show');
//隐藏
$('#section a').tooltip('hide');
//反转显示和隐藏
$('#section a').tooltip('toggle');
//隐藏并销毁
$('#section a').tooltip('destroy');

툴팁에는 4가지 유형의 이벤트가 있습니다.

//이벤트, 기타 유사

$('#select a').on('show.bs.tooltip', function() {
 alert('调用 show 时触发！');
}); 

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.