Bootstrap 5

[basic] BS5 - Tooltip (BS툴팁 = BS말풍선 허버형)

목차
  1. Tooltip 소개
  2. Tooltip 구문
  3. Tooltip 위치

 

Tooltip 소개 

 

마우스 허버 시 나타나는 작은 팝업 상자.



cf.

  • Popover(팝오버) - 클릭 시 보임. / 닫기 누르기 전까지 계속 보임.
  • Toolitp (툴팁) - 허버 시 보임. / 허버 동안만 잠깐 보임.


 

Tooltip 구문

 

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Homzzang.com">홈짱닷컴 주소</button>

 

<script>

// 모든 tooltip 초기화

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {

  return new bootstrap.Tooltip(tooltipTriggerEl)

})

</script>


※ tooltip은 JS로 초기화시켜야 정상작동 함.

cf. BS4 경우, data-toggle="tooltip" 속성 사용. 초기화 방식도 다름.

 

Tooltip 위치

 

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Homzzang.com">홈짱닷컴</a>

<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Homzzang.com">홈짱닷컴</a>

<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Homzzang.com">홈짱닷컴</a>

<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Homzzang.com">홈짱닷컴</a>

<a href="#" data-bs-toggle="tooltip" data-bs-placement="auto" title="Homzzang.com">홈짱닷컴</a>

 

<script>

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {

  return new bootstrap.Tooltip(tooltipTriggerEl)

})

</script>


PS. tooltip은 기본적으로 요소 상단에 표시됨.

cf. BS4 경우, data-placement 속성 사용해 위치 설정.


분류 제목
basic BS5 - HOME (BS소개)
basic BS5 - Start (BS시작) - BS5다운로드 / BS5CDN / BS5구문
basic BS5 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS5 - Grid (BS그리드)
basic BS5 - Text/Typography (BS글자/BS텍스트)
basic BS5 - Color (BS색깔/BS색상) - 글자색 / 배경색
basic BS5 - Table (BS테이블) - 테이블테두리 / 테이블배경색 / 반응형테이블
basic BS5 - Image (BS이미지) - 이미지모양 / 이미지정렬 / 반응형이미지
basic BS5 - Jumbotron (BS점보트론) - 지원 X
basic BS5 - Alert (BS경고 = BS얼럿 = BS경보)
basic BS5 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS5 - Button Group (BS버튼그룹)
basic BS5 - Badge (BS배지)
basic BS5 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS5 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS5 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS5 - List Group (BS리스트그룹)
basic BS5 - Card (BS카드)
basic BS5 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS5 - Collapse (BS접기 = BS컬랩스 = BS토글)
1/4
목록
 홈  PC버전 로그인 일본어
그누앞단언어 1
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 1
웹유틸
회원센터
홈짱닷컴 PC버전 로그인