[basic] BS5 - Tooltip (BS툴팁 = BS말풍선 허버형)

1. Tooltip 소개
2. Tooltip 구문
3. 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 속성 사용해 위치 설정.