Bootstrap 5 도구 툴팁

도구 툴팁

도구 툴팁 컴포넌트는 사용자가 요소에 마우스 포인터를 가져갈 때 나타나는 작은 팝업 창입니다:

도구 툴팁을 생성하는 방법

도구 툴팁을 생성하려면, data-bs-toggle="tooltip" 속성을 요소에 추가합니다.

사용하십시오 title 도구 툴팁 내에서 표시할 텍스트를 지정하는 속성:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="매우 좋아요!">위에 마우스를 올려 놓아!</button>

비고:}툴팁은 JavaScript를 통해 초기화되어야 합니다.

다음 코드는 문서에서 모든 툴팁을 활성화합니다:

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

직접 테스트해보세요

툴팁 정위치

기본적으로, 툴팁은 요소의 상단에 나타납니다.

사용하십시오 data-bs-placement 요소의 상단, 하단, 좌측 또는 우측에 툴팁을 설정하는 방법:

예제

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="매우 좋습니다!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="매우 좋습니다!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="매우 좋습니다!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="매우 좋습니다!">Hover</a>

직접 테스트해보세요