안녕하세요.
오늘은 자바스크립트에서 bootstrap5의 tooltip 기능 구현을 하는 예제를 포스팅하려고 합니다. tooltip은 어떤 요소에 마우스를 올리게 되면 그 요소가 의미하고 있는 내용의 상세 정보를 보충하여 보여줄 수 있는 말풍선 기능입니다. 기능은 간단하지만 실제로 활용을 하면 효과가 상당한 기능입니다. bootstrap에서 지원하는 tooltip은 간단한 속성값 몇 개로 기능 구현이 가능하기 때문에 하나씩 진행해 보고 어떻게 작동하는지 확인해 보도록 하겠습니다.
tooltip 툴팁
어떠한 요소의 내용을 보충해 줄 수 있는 상세한 내용을 간단하게 말풍선 효과를 줘서 표시해 주는 기능으로 지정할 요소에 지정을 해줘서 기능의 효과를 강조할 수 있다.
1. 기본 사용 예시
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
/**
* window document load 실행
*/
window.addEventListener('DOMContentLoaded', () => {
[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')).map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
});
</script>
</head>
<body>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip
</button>
</body>
</html>bootstrap의 tooltip을 사용하려면 bootstrap.bundle.min.js를 import 시켜줘야 합니다. 그리고 tooltip 기능이 활성화될 수 있도록 javascript에서 기능을 추가해주면 됩니다.
tooltip 기능 활성화
[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')).map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})tooltip으로 사용한 요소의 속성값인 data-bs-toggle="tooltip" 기준으로 활성화를 시켜줬습니다.
다음은 tooltip으로 사용할 요소를 보겠습니다.
tooltip 요소 추가
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip
</button>위와 같이 버튼 태그에 tooltip 속성을 등록해 줬습니다.
data-bas-toggle="tooltip" : bootstrap의 tooltip 설정 등록
data-bs-placement="top" : tooltip의 위치 속성 정보 (top, bottom, left, right)
title="..." : tooltip에서 보여질 내용
위의 정리한 속성처럼 간단하게 설정을 해주고나면 tooltip의 기본 사용 설정은 끝입니다! 그럼 바로 실행 결과를 보도록 하겠습니다.
실행 결과
생성한 버튼 태그 위로 마우스를 올리게 되면 버튼 top 위치에 tooltip 말풍선이 show / hide 처리가 되는 결과 모습입니다.
data-bs-placement="top"을 줬기 때문에 요소의 상단에 보여지게 되는데 위치를 바꾸게 되면 말풍선의 꼬리부분도 변경이 됩니다.
위치를 변경하는 예제를 보도록 하겠습니다.
2. 위치 변경 예시
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Left Tooltip
</button>
<br><br>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Right Tooltip
</button>
<br><br>
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
top Tooltip
</button>
<br><br>
<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
bottom Tooltip
</button>top 설정을 하고 있는 버튼을 포함하여 left, right, bottom 버튼 태그를 추가해 줬습니다.
위에서 설명한 data-bs-placement 속성 부분의 값만 위치에 맞게 변경을 해줬습니다.
그럼 실행 결과를 확인해 보도록 하겠습니다.
실행 결과
위의 실행 결과처럼 위치별로 tooltip이 적용된 모습입니다. 위치에 따라 말품선의 꼬리도 변경이 됐습니다.
tooltip 기능을 사용하다보면 위치를 한 부분만 놓고 사용해도 되지만 tooltip을 적용할 DOM 요소의 위치에 따라 tooltip이 가려지는 경우도 있고, 시안성이 좋지 않을 수 있기 때문에 위치를 변경하는 것도 알아두는 것이 좋습니다.
마무리
bootstrap을 연동해서 화면을 개발하다 보면 동적인 기능들이 생각보다 많이 필요합니다. 없어도 될 기능이라고 생각할 수도 있지만 적용하고나서 보면 생각보다 효과가 좋은 기능들이 많습니다. 요즘에는 제가 bootstrap을 활용한 기능들을 포스팅하고 있는데요. 예전부터 일하면서 적용을 해왔던 기능들이라 이렇게 포스팅까지 하고 있습니다. 이런 기능들은 생각보다 클라이언트의 요청으로 구현되는 기능들이 많습니다. 처음에는 귀찮을 수 있지만 적용하다 보면 내가 만든 기능들의 스타일이 올라가면 나름 기분이 좋습니다. :)
다음에도 간단하지만 활용도가 높은 기능들로 포스팅하도록 하겠습니다.
그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.
'javascript > javascript' 카테고리의 다른 글
| 자바스크립트 chart.js Stacked Bar Chart 만들기 (스택 Bar 차트) (0) | 2023.02.05 |
|---|---|
| 자바스크립트 Chart.js 바(Bar) 차트 만들기 (막대차트) (1) | 2023.02.04 |
| 자바스크립트 bootstrap5 carousel 기능 만들기 (캐러셀) (0) | 2023.02.03 |
| 자바스크립트 bootstrap5 아코디언 만들기 (accordion) (0) | 2023.02.03 |
| 자바스크립트 bootstrap5 Offcanvas 만들기 (오프캔버스) (0) | 2023.02.02 |
