Bootstrap - 튤팁(Tooltips)

01.Bootstrap - 튤팁(Tooltips)

• 툴팁은 웹 상에서 개체에 마우스를 올리게 되면 작은 말풍선으로 사용자에게 설명을 제공하는 기능입니다.
• 주의사항은 툴팁은 성능상의 이유로 사용자가 동의를 해야만 활성화됩니다.
• 그렇기 때문에 JavaScript로 직접 초기화를 진행해야 합니다.

1-1.튤팁 소스 코드 & 화면 출력

• HTML

  <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>

• JavaScript

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