목차
- Tooltip 소개
- Tooltip 구문
- Tooltip 위치
Tooltip 소개
마우스 허버 시 나타나는 작은 팝업 상자.
cf.
- Popover(팝오버) - 클릭 시 보임. / 닫기 누르기 전까지 계속 보임.
- Toolitp (툴팁) - 허버 시 보임. / 허버 동안만 잠깐 보임.
Tooltip 구문
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Homzzang.com">홈짱닷컴 주소</button>
<script>
// 모든 tooltip 초기화
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
※ tooltip은 JS로 초기화시켜야 정상작동 함.
cf. BS4 경우, data-toggle="tooltip" 속성 사용. 초기화 방식도 다름.
Tooltip 위치
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Homzzang.com">홈짱닷컴</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Homzzang.com">홈짱닷컴</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Homzzang.com">홈짱닷컴</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Homzzang.com">홈짱닷컴</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="auto" title="Homzzang.com">홈짱닷컴</a>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
PS. tooltip은 기본적으로 요소 상단에 표시됨.
cf. BS4 경우, data-placement 속성 사용해 위치 설정.