7-2. 툴팁
■ 툴팁
툴팁(tooltip) 요소는 사용자가 마우스 포인터를 요소 위에 올렸을 때 나타나는 작은 팝업 상자입니다.
툴팁을 만들려면 요소에 data-bs-toggle="tooltip" 속성을 추가합니다. 툴팁 내부에 표시될 텍스트를 지정하려면 title 속성을 사용합니다.
<div class="container mt-3">
<h3>툴팁(tooltip)</h3>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="안녕하세요!">
마우스 올려주세요!
</button>
</div>
<script>
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
ex7-2.html의 실행 결과
