[Bootstrap] Tooltip

1. 기본 사용법

• Tooltip은 요소에 마우스를 올렸을 때 나타나는 작은 설명 박스로, 사용자에게 추가 정보를 제공

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">
  Hover over me!
</button>

• `data-bs-toggle="tooltip"`: 툴팁 기능 활성화
• `title="..."`: 툴팁에 표시할 텍스트

---

2. 초기화 (필수 JavaScript 코드)

• 툴팁은 JavaScript로 초기화되어야 작동

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

📌 이 코드는 페이지 내 모든 툴팁을 한 번에 활성화

---

3. 툴팁 위치 지정

• `data-bs-placement` 속성을 통해 툴팁 위치 조정 가능

위치	예시 코드
위 (기본값)	`data-bs-placement="top"`
아래	`data-bs-placement="bottom"`
왼쪽	`data-bs-placement="left"`
오른쪽	`data-bs-placement="right"`

<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Hooray!">Hover me</a>