부트스트랩 툴팁 커스터마이징) 너비(크기)랑 폰트 조절, 줄바꿈, 위치 조절

준비하기)

1. 툴팁 활성화

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

2. 툴팁 만들기

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Tooltip on left
</button>

 

 

2. 툴팁 커스터마이징 하기

1. 줄바꿈

- 전체코드

<img class="help-text" src="/static/images/helpbtn.png" data-bs-toggle="tooltip" data-bs-html="true"
data-bs-placement="bottom" data-bs-title="포인트 충전은, 카카오페이로 할 시 24시간 내에 반드시 환불처리됩니다.<br/> 걱정말고 테스트해주세요~">

 

- 자세히 보기

data-bs-html="true"

위 코드를 추가해주고, 마크다운 문법인 <br/>을 사용하여 줄바꿈을 할 수 있다..!!

 

 

2. 너비(크기)

- 전체코드

/* 크기변경 */
.tooltip>.tooltip-inner {
  max-width: 400px;
}

이렇게 max-width 를 사용하여 너비(크기)를 조절해줄 수 있다.

 

 

3. 폰트 조절

/* 폰트크기 조절 */
.tooltip>.tooltip-inner {
  font-size:10px;
}

 

 

4. 위치 조절

/* 위치*/
.tooltip{
  inset: auto auto 100px 100px;
}

이렇게 위치를 바꿀 수 있다.

 

 

 

 

 

참고자료1) (이건 다른 방식으로 구현함 -> 직접 만들기!!)

https://deeplify.dev/front-end/markup/tooltip

[HTML/CSS] 툴팁 적용하는 방법 (title 및 커스텀 툴팁)

 

참고자료2) https://getbootstrap.kr/docs/5.2/components/tooltips/

툴팁