툴팁 플러그인
툴팁 플러그인은 사용자가 요소 위에 마우스 포인터를 이동할 때 나타나는 작은 팝업 상자입니다 :
팁 : 플러그인은 (사용하여 개별적으로 포함시킬 수 Bootstrap's 개인 "tooltip.js" (사용, 또는 모두 한 번에 파일) "bootstrap.js" 또는 "bootstrap.min.js" ).
어떻게 도구 설명을 작성하려면
툴팁을 만들려면 추가 data-toggle="tooltip" 요소에 속성을.
사용 title 툴팁 안에 표시해야 할 텍스트를 지정하는 속성 :
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> 툴팁이 jQuery를 사용하여 초기화해야합니다 참고 : 지정된 요소를 선택하고 전화 tooltip() 메소드를.
다음 코드는 문서의 모든 툴팁을 가능하게 할 것이다 :
예
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
»그것을 자신을 시도 위치 툴팁
기본적으로 도구 설명은 요소의 상단에 표시됩니다.
사용 data-placement 좌측 상단, 하단의 툴팁 또는 소자의 우측의 위치를 설정하는 특성 :
예
<a href="#" data-toggle="tooltip" data-placement="top"
title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip"
data-placement="bottom" title="Hooray!">Hover</a>
<a href="#"
data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a
href="#" data-toggle="tooltip" data-placement="right"
title="Hooray!">Hover</a>
»그것을 자신을 시도 팁 : 사용할 수있는 data-placement 브라우저에서 툴팁의 위치를 결정하게됩니다 "자동"값과 속성을. 값이 예를 들어, "auto left" 그렇지 않으면 오른쪽에, 가능하면 툴팁이 왼쪽에 표시됩니다.
부트 스트랩 도구 설명 참조 완료
모든 툴팁 옵션, 방법 및 이벤트의 완전한 참고로, 우리로 이동 부트 스트랩 JS 도구 설명 참조 .