[Bootstrap] 07. Dropdown, Tooltip, Popover 이해하기

[Bootstrap] 07. Dropdown, Tooltip, Popover 이해하기

이전 글에서는 Bootstrap에서 상태를 표현할 때 자주 사용하는 Alert, Badge, Progress를 정리했습니다. 이번 글에서는 화면 위에 추가 정보를 보여주거나 선택 메뉴를 제공할 때 사용하는 Dropdown, Tooltip, Popover를 살펴보겠습니다.

이 세 가지 컴포넌트는 화면 공간을 많이 차지하지 않으면서도, 사용자에게 필요한 선택지나 보조 설명을 제공할 수 있다는 장점이 있습니다. 다만 동작형 컴포넌트이기 때문에 Bootstrap JavaScript 연결 여부도 함께 확인해야 합니다.

---

1. Dropdown이란?

Dropdown은 버튼이나 링크를 클릭했을 때 아래로 메뉴가 펼쳐지는 컴포넌트입니다. 사용자 메뉴, 정렬 기준, 카테고리 선택, 더보기 메뉴 등에 자주 사용됩니다.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    메뉴 열기
  </button>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">프로필</a></li>
    <li><a class="dropdown-item" href="#">설정</a></li>
    <li><a class="dropdown-item" href="#">로그아웃</a></li>
  </ul>
</div>

Dropdown은 바깥 영역에 dropdown 클래스를 사용하고, 버튼에는 dropdown-toggle과 data-bs-toggle="dropdown"을 함께 사용합니다. 실제 메뉴 목록은 dropdown-menu 안에 작성합니다.

클래스	역할
dropdown	드롭다운 전체 영역
dropdown-toggle	메뉴를 여는 버튼
dropdown-menu	펼쳐지는 메뉴 영역
dropdown-item	각 메뉴 항목

---

2. Dropdown 구분선과 제목

메뉴가 많아지면 항목을 그룹으로 나누는 것이 좋습니다. 이때 dropdown-header와 dropdown-divider를 사용할 수 있습니다.

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">계정</h6></li>
  <li><a class="dropdown-item" href="#">프로필</a></li>
  <li><a class="dropdown-item" href="#">설정</a></li>

  <li><hr class="dropdown-divider"></li>

  <li><a class="dropdown-item text-danger" href="#">로그아웃</a></li>
</ul>

dropdown-header는 메뉴 그룹의 제목처럼 사용할 수 있고, dropdown-divider는 메뉴 사이에 구분선을 넣을 때 사용합니다.

---

3. Dropdown 방향 조절

Dropdown은 기본적으로 아래 방향으로 열립니다. 필요에 따라 위, 오른쪽, 왼쪽 방향으로 열리게 만들 수도 있습니다.

<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
    위로 열기
  </button>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">메뉴 1</a></li>
    <li><a class="dropdown-item" href="#">메뉴 2</a></li>
  </ul>
</div>

클래스	열리는 방향
dropdown	아래 방향
dropup	위 방향
dropend	끝 방향
dropstart	시작 방향

화면의 아래쪽에 버튼이 있을 때는 dropup을 사용하면 메뉴가 화면 밖으로 잘리는 문제를 줄일 수 있습니다.

---

4. Tooltip이란?

Tooltip은 사용자가 특정 요소에 마우스를 올리거나 포커스했을 때 짧은 설명을 보여주는 컴포넌트입니다. 버튼의 의미, 아이콘 설명, 입력 도움말처럼 짧은 보조 정보를 전달할 때 사용합니다.

<button type="button" class="btn btn-secondary"
  data-bs-toggle="tooltip"
  data-bs-title="저장 버튼입니다">
  저장
</button>

Tooltip은 HTML 속성만 작성한다고 바로 동작하지 않을 수 있습니다. Bootstrap JavaScript에서 Tooltip을 활성화하는 코드가 필요합니다.

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');

const tooltipList = [...tooltipTriggerList].map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl);
});

위 코드는 페이지 안에서 data-bs-toggle="tooltip" 속성을 가진 요소를 찾아 Tooltip 기능을 활성화합니다.

---

5. Tooltip 위치 조절

Tooltip은 위, 아래, 왼쪽, 오른쪽 위치에 표시할 수 있습니다. 위치는 data-bs-placement 속성으로 지정합니다.

<button type="button" class="btn btn-outline-primary"
  data-bs-toggle="tooltip"
  data-bs-placement="top"
  data-bs-title="위쪽에 표시됩니다">
  Top
</button>

<button type="button" class="btn btn-outline-primary"
  data-bs-toggle="tooltip"
  data-bs-placement="bottom"
  data-bs-title="아래쪽에 표시됩니다">
  Bottom
</button>

값	표시 위치
top	위쪽
bottom	아래쪽
left	왼쪽
right	오른쪽

Tooltip은 너무 긴 설명보다 한 문장 이하의 짧은 안내에 적합합니다. 설명이 길어질수록 Tooltip보다 Popover가 더 어울릴 수 있습니다.

---

6. Popover란?

Popover는 Tooltip보다 더 많은 내용을 보여줄 수 있는 작은 정보 박스입니다. 제목과 본문을 함께 넣을 수 있어서 상세 설명, 도움말, 확인 안내 등에 사용할 수 있습니다.

<button type="button" class="btn btn-lg btn-danger"
  data-bs-toggle="popover"
  data-bs-title="삭제 안내"
  data-bs-content="삭제한 데이터는 복구하기 어렵습니다.">
  삭제
</button>

Popover도 Tooltip과 마찬가지로 JavaScript 활성화가 필요합니다.

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');

const popoverList = [...popoverTriggerList].map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl);
});

Popover는 data-bs-title에 제목을 넣고, data-bs-content에 본문 내용을 넣어 사용할 수 있습니다.

---

7. Popover 위치 조절

Popover도 Tooltip처럼 data-bs-placement 속성으로 위치를 조절할 수 있습니다.

<button type="button" class="btn btn-outline-dark"
  data-bs-toggle="popover"
  data-bs-placement="right"
  data-bs-title="도움말"
  data-bs-content="오른쪽에 표시되는 Popover입니다.">
  도움말 보기
</button>

버튼이나 아이콘 주변에 보조 설명을 붙이고 싶을 때 유용합니다. 다만 작은 화면에서는 위치가 어색해질 수 있으므로 모바일 화면도 함께 확인하는 것이 좋습니다.

---

8. Tooltip과 Popover의 차이

구분	Tooltip	Popover
용도	짧은 설명	조금 더 자세한 설명
내용	보통 한 줄	제목과 본문 가능
사용 예시	아이콘 설명, 버튼 도움말	상세 안내, 주의 문구
동작	마우스 오버, 포커스 중심	클릭 중심으로 사용 가능

짧게 보조 설명만 필요하면 Tooltip, 제목과 본문이 필요한 설명이면 Popover를 사용하는 식으로 구분하면 됩니다.

---

9. Dropdown, Tooltip, Popover 함께 사용하기

실제 화면에서는 이 컴포넌트들을 함께 사용하는 경우도 많습니다. 예를 들어 사용자 메뉴는 Dropdown으로 만들고, 각 버튼의 의미는 Tooltip으로 보완할 수 있습니다.

<div class="d-flex gap-2 align-items-center">

  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      사용자 메뉴
    </button>

    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">프로필</a></li>
      <li><a class="dropdown-item" href="#">설정</a></li>
      <li><a class="dropdown-item" href="#">로그아웃</a></li>
    </ul>
  </div>

  <button type="button" class="btn btn-outline-secondary"
    data-bs-toggle="tooltip"
    data-bs-title="알림을 확인합니다">
    알림
  </button>

</div>

이처럼 Dropdown은 선택지를 보여주고, Tooltip은 버튼의 의미를 보완하는 역할로 함께 사용할 수 있습니다.

---

10. 사용 시 주의할 점

• Dropdown은 선택지가 너무 많아지지 않게 구성하는 것이 좋다.
• Tooltip은 짧은 설명에만 사용하는 것이 좋다.
• Popover는 필요한 상황에서만 사용해야 화면 흐름을 방해하지 않는다.
• Tooltip과 Popover는 JavaScript 초기화가 필요할 수 있다.
• 모바일 화면에서는 hover 동작이 제한적일 수 있으므로 클릭 흐름도 확인해야 한다.

이 컴포넌트들은 화면을 깔끔하게 유지하는 데 도움이 되지만, 너무 많이 사용하면 오히려 사용자가 정보를 찾기 어려워질 수 있습니다. 필요한 곳에만 짧고 명확하게 사용하는 것이 좋습니다.

---

11. 정리

• Dropdown은 클릭했을 때 메뉴를 펼쳐 보여주는 컴포넌트다.
• dropdown-menu 안에 dropdown-item을 넣어 메뉴 항목을 구성한다.
• Tooltip은 짧은 보조 설명을 보여줄 때 사용한다.
• Popover는 제목과 본문이 있는 추가 설명을 보여줄 때 사용한다.
• Tooltip과 Popover는 Bootstrap JavaScript 초기화가 필요할 수 있다.
• 작은 화면에서는 위치와 클릭 흐름을 함께 확인해야 한다.

이번 글에서는 Bootstrap의 Dropdown, Tooltip, Popover를 정리했습니다. 이 컴포넌트들은 화면 공간을 아끼면서도 사용자가 필요한 정보를 확인할 수 있게 도와줍니다.

다음 글에서는 Bootstrap에서 화면 요소를 접고 펼칠 수 있는 Collapse와 콘텐츠를 넘겨 보여주는 Carousel을 정리해보겠습니다.