[css] 툴팁 및 팝오버 스타일링

22 Dec 2023

웹 개발에서 툴팁 및 팝오버는 사용자에게 정보를 제공하거나 액션을 유도하는 데 유용합니다. 이번 글에서는 CSS를 사용하여 툴팁과 팝오버를 스타일링하는 방법을 알아보겠습니다.

1. 툴팁 스타일링

툴팁은 사용자가 요소에 마우스를 올렸을 때 나타나는 작은 정보 상자입니다. 다음은 간단한 툴팁을 CSS로 스타일링하는 예제입니다.

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

위 코드는 요소에 마우스를 올렸을 때 툴팁이 나타나도록 만드는 CSS입니다. .tooltip 클래스에는 position: relative 스타일을 적용하여 하위 요소의 위치를 설정하고, .tooltiptext 클래스에는 툴팁의 스타일을 정의합니다.

2. 팝오버 스타일링

팝오버는 클릭 또는 호버할 때 나타나는 대화형 정보 상자입니다. 다음은 팝오버를 CSS로 스타일링하는 예제입니다.

.popover {
  position: relative;
  display: inline-block;
}

.popover .popovertext {
  visibility: hidden;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border: 1px solid #aaa;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
}

.popover:hover .popovertext {
  visibility: visible;
  opacity: 1;
}

위 코드는 클릭 또는 호버할 때 팝오버가 나타나도록 만드는 CSS입니다. .popover 클래스에는 position: relative 스타일을 적용하여 하위 요소의 위치를 설정하고, .popovertext 클래스에는 팝오버의 스타일을 정의합니다.

마무리

이제 CSS를 사용하여 툴팁과 팝오버를 스타일링하는 방법에 대해 알아보았습니다. 이를 응용하여 웹 페이지에서 눈에 띄는 툴팁과 팝오버를 만들어보세요!