툴팁은 링크를 설명 할 때 매우 유용합니다. Tooltip 플러그인은 Jason 프레임이 작성한 jQuery.tipsy에서 영감을 얻었습니다. 툴팁 플러그인은 이미지에 의존하지 않고 CSS를 사용하여 애니메이션 효과를 달성하고 데이터 속성을 사용하여 제목 정보를 저장하는 등 많은 개선을 이루었습니다.
플러그인의 기능을 별도로 참조하려면 Tooltip.js를 참조해야합니다. 또는 Bootstrap 플러그인 개요 장에서 언급했듯이 bootstrap.js 또는 compressed 버전의 bootstrap.min.js를 참조하십시오.
1. 사용법
툴팁 플러그인은 요구 사항에 따라 컨텐츠 및 태그를 생성합니다. 기본적으로 툴팁은 트리거 요소 뒤에 배치됩니다. 툴팁을 추가 할 수있는 두 가지 방법이 있습니다.
1. 데이터 속성을 통해 : 툴팁을 추가 해야하는 경우 앵커 태그에 Data-Toggle = "ToolTip"을 추가하십시오. 앵커의 제목은 툴팁의 텍스트입니다. 기본적으로 플러그인은 툴팁을 상단에 설정합니다.
<a href = "#"data-toggle = "Tooltip"> 나를 위로 가져 가십시오 </a>
2. JavaScript를 통해 : JavaScript를 통해 Tooltip (Tooltip) :
$ ( '#식별자'). 툴팁 (옵션)
툴팁 플러그인은 드롭 다운 메뉴 및 앞에서 설명한 다른 플러그인과 같지 않으며 순수한 CSS 플러그인이 아닙니다. 플러그인을 사용하려면 jQuery를 사용하여 활성화해야합니다 (JavaScript 읽기). 다음 스크립트를 사용하여 페이지의 모든 툴팁을 활성화하십시오.
$ (function () {$ ( "[Data-Toggle = 'ToolTip']"). ToolTip ();});2. 옵션
Bootstrap Data API (Bootstrap Data API)를 통해 추가되거나 JavaScript를 통해 호출되는 몇 가지 옵션이 있습니다. 다음 표는 다음 옵션을 나열합니다.
삼. 툴팁
// 기본 예제 <a href = "#"data-toggle = "툴팁"> html5 </a> // js 파트는 $ ( '#section'). Tooltip ();
툴팁에는 다음과 같이 프롬프트 표시를 구성하는 많은 속성이 있습니다.
<a href = "#"rel = "rel ="툴팁 "data-toggle ="툴팁 "data-animation ="false "data-html ="true "data-poremal ="auto "data-selector ="a [rel = tooltip] "data-trigger ="data-delay = "500"data-template = "<b> 123 </b>"> html5 </a ">
JavaScript에서 이전 데이터를 제거하십시오. 포함 : 애니메이션, HTML, 배치, 선택기, 오리지널 타이틀, 제목, 트리거, 지연, 컨테이너 및 템플릿 및 기타 속성.
// javaScript 메소드 $ ( '#섹션 a'). 툴팁 ({delay : {show : 500, hide : 100,}, 컨테이너 : 'body'});JavaScript에는 네 가지 방법이 있습니다 : 표시, 숨기기, 토글 및 파괴.
// show $ ( '##section a'). Tooltip ( 'show'); // hide $ ( '##section a'). 툴팁 ( 'hide'); // hide show and hide $ ( '#section a'). 툴팁 ( '토글');
툴팁에는 네 가지 유형의 이벤트가 있습니다.
// 이벤트, 기타 유사성
$ ( '#select a'). on ( 'show.bs.tooltip', function () {alert ( '쇼가 호출 될 때 무료!');});이 일련의 튜토리얼은 다음과 같이 컴파일되었습니다. Bootstrap Basic Tutorials 특별 주제, Click to Learn에 오신 것을 환영합니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.