Bootstrap 툴팁 활용하기: 방향 설정과 실전 예제

 

웹사이트를 제작하다 보면 버튼이나 아이콘 위에 간단한 정보를 제공하고 싶을 때가 있습니다. 이때 유용하게 쓸 수 있는 것이 바로 **툴팁(Tooltip)**입니다. 툴팁은 사용자가 특정 요소 위에 마우스를 올렸을 때 작은 팝업 형태로 추가 정보를 제공하는 UI 요소입니다. Bootstrap은 이러한 툴팁을 손쉽게 구현할 수 있도록 강력한 도구를 제공합니다.

 

이번 글에서는 Bootstrap 툴팁의 기본 설정 방법부터 방향 설정까지, 실전 예제를 통해 알아보겠습니다.

---

툴팁의 기본 설정 방법

Bootstrap에서 툴팁을 사용하려면 HTML 요소에 필요한 속성을 추가하고, JavaScript를 통해 초기화 작업을 해주어야 합니다. 예를 들어, 버튼 위에 "여기를 클릭하세요"라는 메시지를 툴팁으로 보여주고 싶다면 다음과 같이 작성할 수 있습니다.

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="여기를 클릭하세요!">
    툴팁 버튼
</button>

위 코드에서 중요한 점은 data-bs-toggle="tooltip"과 title 속성입니다.

• data-bs-toggle="tooltip": Bootstrap이 이 요소를 툴팁으로 처리하도록 지정합니다.
• title: 툴팁으로 표시할 내용을 설정합니다.

단, 이렇게 작성한다고 툴팁이 바로 활성화되는 것은 아닙니다. JavaScript를 통해 초기화 작업이 필요합니다.

---

JavaScript로 툴팁 초기화하기

다음은 툴팁을 활성화하는 간단한 JavaScript 코드입니다.

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

이 코드는 HTML에 툴팁이 적용된 모든 요소를 찾아 초기화합니다. 따라서 페이지의 어디에 툴팁을 추가하든 한 번의 초기화 작업으로 모든 툴팁이 동작하게 됩니다.

---

툴팁의 방향 설정하기

툴팁의 위치를 사용자 인터페이스에 맞게 조정하려면 data-bs-placement 속성을 사용하면 됩니다. 이 속성을 이용해 툴팁을 요소의 위쪽, 아래쪽, 왼쪽, 오른쪽에 나타나도록 설정할 수 있습니다.

툴팁 방향 옵션

• top: 툴팁이 요소의 위쪽에 나타납니다.
• bottom: 툴팁이 요소의 아래쪽에 나타납니다.
• left: 툴팁이 요소의 왼쪽에 나타납니다.
• right: 툴팁이 요소의 오른쪽에 나타납니다.
• auto: 화면 경계를 고려해 적절한 위치에 툴팁을 자동으로 배치합니다.

예제 코드

<div class="container mt-4">
    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="위쪽 툴팁">
        위쪽 툴팁
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="아래쪽 툴팁">
        아래쪽 툴팁
    </button>
    <button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="left" title="왼쪽 툴팁">
        왼쪽 툴팁
    </button>
    <button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="right" title="오른쪽 툴팁">
        오른쪽 툴팁
    </button>
</div>

위 코드를 작성한 뒤 툴팁을 초기화하면 각 버튼 위로 마우스를 올릴 때 방향에 따라 툴팁이 표시됩니다.

---

동적으로 툴팁 방향 설정하기

만약 툴팁 방향을 동적으로 설정해야 하는 상황이라면, JavaScript를 활용하면 됩니다. 아래는 예제 코드입니다.

$(document).ready(function() {
    var dynamicTooltip = $('#myButton');
    dynamicTooltip.attr('data-bs-placement', 'top'); // 툴팁을 위쪽에 배치
    new bootstrap.Tooltip(dynamicTooltip[0]); // 툴팁 초기화
});

HTML 코드

<button id="myButton" class="btn btn-warning" data-bs-toggle="tooltip" title="동적으로 설정된 툴팁">
    동적 툴팁
</button>

이 코드는 특정 조건에 따라 툴팁의 방향을 변경할 수 있어 유연한 UI 설계가 가능합니다.

---

툴팁을 사용할 때 주의할 점

1. 화면 경계
   툴팁이 화면 바깥으로 나가지 않도록 data-bs-placement="auto" 속성을 사용하는 것이 좋습니다. 이렇게 하면 화면 크기와 요소 위치에 따라 자동으로 툴팁 방향이 조정됩니다.
2. 컨텐츠 길이
   툴팁에 너무 긴 내용을 넣으면 사용자 경험이 저하될 수 있습니다. 툴팁은 간단한 정보를 전달할 때 가장 효과적입니다.
3. 접근성
   툴팁은 보조 기술(예: 스크린 리더)에서 접근 가능하도록 설계되어야 합니다. aria-label 또는 aria-describedby 속성을 활용하면 더 나은 접근성을 제공할 수 있습니다.

---

Bootstrap의 툴팁은 단순하지만 강력한 UI 요소입니다. 기본 설정부터 방향 지정까지 다양한 기능을 제공하기 때문에 웹사이트의 직관적인 사용성을 높이는 데 큰 도움이 됩니다. 적절한 위치와 내용을 활용하면 사용자 경험을 한층 더 향상시킬 수 있을 것입니다.