Bootstrap 툴팁

OROSY·2021년 4월 18일
0

Bootstrap

목록 보기
6/9
post-thumbnail

Bootstrap 툴팁

툴팁은 웹 상에서 개체에 마우스를 올리게 되면 작은 말풍선으로 사용자에게 설명을 제공하는 기능입니다.

주의사항은 툴팁은 성능상의 이유로 사용자가 동의를 해야만 활성화됩니다. 그렇기 때문에, JavaScript로 직접 초기화를 진행해야 합니다.

출처: Bootstrap Tooltips

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

1.2 화면 출력

profile
Life is a matter of a direction not a speed.

0개의 댓글