BootStrap - 툴팁(tooltip)

https://getbootstrap.com/docs/5.1/components/tooltips/

Tooltips

 

BootStrap의 tooltip은 다른 것들과는 다르게 성능상의 문제로 초기화를 해주어야 한다.

 

초기화하는 방법: 아래 코드를 js파일에 넣어준다

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

 

ex)

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

 

 

 

초기화를 한경우

초기화를 안한경우 :  마우스의 옆에 나타난다