[CSS] SCSS를 활용한 툴팁(tooltip) 구현해보자! (feat. transform-origin)

 

 

툴팁 레이아웃(html) 및 스타일(scss)

 

<div class="wrap">
  <button>
    New
    <span class="tooltip">새로운 소식!</span>
  </button>
</div>

 

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 1px solid red;
  button {
    position: relative;
  }
  .tooltip{
    position: absolute;
    bottom: calc(-100% - 20px - 6px - 2px); //패딩, 삼각형 높이, 사이 간격 값들 빼기
    left: 50%;
    z-index: 999;
    transform: translateX(-50%);
    width: 150px;
    padding: 10px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    
    &::before {
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 998;
      display: inline-block;
      content: '';
      border: solid transparent;
      border-width: 0 6px 6px;
      border-bottom-color: #fff;
    }
  }
}

 

스타일(CSS) 반영된 툴팁(tooltip) UI

 

 

툴팁 모션(motion) 추가

삼각형(화살표) 기준으로 툴팁 크기(scale)가 0에서 100으로 나타났다(show), 사라졌다(hide)하는 모션 스타일을 추가해 봅시다.

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 1px solid red;
  button {
    position: relative;
  }
  .tooltip{
    position: absolute;
    bottom: calc(-100% - 20px - 6px - 2px);
    left: 50%;
    z-index: 999;
    transform: translateX(-50%);
    width: 150px;
    padding: 10px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    // 툴팁 모션 추가하기
    transform: scale(0) translateX(-50%);
    transform-origin: 0 -6px;
    transition: transform .3s cubic-bezier(.9, .28, .45, .75);
    
    &::before {
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 998;
      display: inline-block;
      content: '';
      border: solid transparent;
      border-width: 0 6px 6px;
      border-bottom-color: #fff;
    }
    
    &.show {
      transform: scale(1) translateX(-50%);
      transition: transform .3s cubic-bezier(.9, .28, .45, .75);
    }
    
    &.hide {
      transform: scale(0) translateX(-50%);
      transition: transform .3s cubic-bezier(.9, .28, .45, .75);
    }
    
  }
}

 

 

 

이제 스크립트를 정의해 봅시다.

페이지가 로딩이 완료되면 툴팁 요소에 show 클래스를 추가합니다. 이로써 툴팁이 화면에 나타나게 됩니다.
setTimeout을 활용하여 툴팁이 5초 동안 화면에 나타나고, 그 후에 사라지게 처리했습니다.

const tooltip = document.querySelector('.tooltip');

window.addEventListener('DOMContentLoaded', () => {
  tooltip.classList.add('show');
  setTimeout(function() {
    tooltip.classList.remove('show');
    tooltip.classList.add('hide');
  }, 5000);
})

 

transform-origin 속성 이해하기

transform-origin는 transform 속성과 함께 사용되어 요소의 변형 중심을 조절하는 데 유용합니다.

이 속성을 사용하면 해당 요소의 위치를 기준으로 회전(rotate), 크기 조절(scale), 기울임(skew) 등의 변형이 발생할 때 중심점을 지정할 수 있습니다. transform-origin의 값은 요소의 크기를 기준으로 상대적인 길이나 키워드로 지정할 수 있습니다.

 

길이 값

- px, 백분율(%) 등으로 지정할 수 있습니다.

- 0, 0%는 해당 방향의 시작 지점을 나타냅니다.

- 100%는 방향의 끝 지점을 나타냅니다.

 

키워드 값

- center : 요소의 중심을 나타냅니다.

- top, bottom, left, right : 각 상단, 하단, 좌측, 우측을 나타냅니다.

 

 

 

 

 

 

[Javascript] 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보자

 

Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. swiper) - 3편

[Javascript] JavaScript로 스크롤 조작하기, scrollTo(), scrollBy(), scrollIntoView()

 

 

[git] Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하기

 

[Utility] Snipaste - 무료 캡쳐 도구, 핀(Pin) 고정, 클립보드(Clipboard), 색상 추출(Color Picker)