CSS의 absolute position으로 툴팁(tooltip) 구현하기

웹사이트에서 부연적인 정보를 선택적으로 보여주긴 위한 수단으로 툴팁(tooltip)이 많이 사용됩니다. 예를 들어, 아래 웹페이지에서 HTML과 CSS위에 마우스 포인터를 올려놓으면 각 용어가 무엇의 약자인지가 표시됩니다.

이번 포스팅에서는 CSS의 absolute position를 응용해서 간단한 툴팁을 구현하는 방법에 대해서 알아보겠습니다.

absolute position에 대한 기본적인 특징과 작동 매커니즘은 대해서는 관련 포스팅를 참고 바랍니다.

HTML 마크업

먼저 툴팁 구현을 위한 HTML 코드를 작성해보도록 하겠습니다. tooltip 클래스로 툴팁 표시가 필요한 약어를 마크업하고, tooltip-text 클래스로 툴팁에 표시될 내용을 마크업합니다.

<p>
  개발자를 위한 다양한 웹 기술을 배워보세요.
  <span class="tooltip"
    >HTML<span class="tooltip-text">HyperText Markup Language</span></span
  >은 웹페이지에 내용을 기술하고 정의하는 데 사용합니다.
  <span class="tooltip"
    >CSS<span class="tooltip-text">Cascading Style Sheets</span></span
  >는 웹페이지 콘텐츠의 모양이나 표현을 기술하는 데 사용합니다.
</p>

CSS 스타일링

tooltip 클래스의 display 속성을 inline-block으로 변경해줍니다. 툴팁이 약어 바로 아래에 표시되게 하기 위함입니다.

.tooltip {
  display: inline-block;
  color: deeppink;
  font-weight: bold;
}

다음으로 tooltip-text 클래스에 대한 스타일을 추가해주겠습니다. 툴팁은 평소에는 보이지 않아야 하기 때문에 display 속성을 none으로 설정해야합니다. 또한 툴팁은 공간을 차지하지 안 되기 때문에 position 속성을 absolute로 설정해줍니다.

.tooltip-text {
  display: none;
  position: absolute;
  max-width: 200px;
  border: 1px solid;
  border-radius: 5px;
  padding: 5px;
  font-size: 0.8em;
  color: white;
  background: deeppink;
}

마지막으로, 약어에 마우스 포인터를 올렸을 때, 툴팁이 화면에 나타날 수 있도록 스타일을 해줍니다.

.tooltip:hover .tooltip-text {
  display: block;
}

마치면서

본 포스팅에서 작성한 코드는 웹 접근성(accessibility)에 대한 고려가 되어 있지 않기 때문에 실제 웹사이트에서 사용하기에는 보완이 필요할 것입니다. absolute position를 사용하면 툴팁을 구현하는 게 생각보다 어렵지 않으니 이 코드를 기본으로 상황에 맞게 응용해보셨으면 좋겠습니다.