부트스트랩 툴팁 플러그인
툴팁 플러그인
도구 설명 플러그인은 사용자가 요소 위로 마우스 포인터를 이동할 때 나타나는 작은 팝업 상자입니다.
팁: 플러그인은 개별적으로(Bootstrap의 개별 "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브라우저가 툴팁의 위치를 결정할 수 있습니다. 예를 들어 값이 " auto left"이면 툴팁은 가능한 경우 왼쪽에 표시되고 그렇지 않으면 오른쪽에 표시됩니다.
전체 부트스트랩 툴팁 참조
모든 툴팁 옵션, 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap JS 툴팁 참조 로 이동하십시오 .