개자인 : 툴 팁 만들기

 

 

별거 아닌 홈페이지를 만들면서도 가장 어려웠던 작업이 툴 팁을 제작했던 것이었다. 그냥 마우스 올리면 나타나고 마우스가 일정 영역을 벗어나면 사라지는 동작정도라면 모르겠으나 (사실 그것도 javascript 가 들어가야 했는데 나는 그것도 겨겨우 만들어낼 수 있는 정도였기에) 마우스를 어느정도 따라오는 인터렉션 까지 구현하고 싶다는 생각이 들 때 즈음 플러그인을 사용하는 것을 알아보게 되었다. 그리고 그 사용기에 대한 내용을 대충이라도 정리해 보는 글을 블로그에 작성해보면 어떨까 싶어서 써보는 글이다. 사실 디자인만 해봤지 플러그인까지 써가면서 만들 정도의 홈페이지 구현은 해본적이 없었기에 플러그인을 적용해서 만들어 볼까? 하면서도 이걸 도대체 어떻게 써야하나 막막했었지만 홈페이지에 나온대로 차근차근 하면 어렵지 않게 적용할 수 있다. 

 

 

https://tippyjs.bootcss.com/

내가 사용한 플러그인은 Tippy.js 이며 다양한 기본스타일 제공부터 커스텀까지 가능하고 다양한 애니메이션 효과까지 제공해 주고 있으니 쓴다면 굉장히 고퀄의 툴 팁을 구현해 낼 수 있다. 홈페이지에 접속하면 귀여운 캐릭터가 반겨주는데 여기 좌측 매뉴에서 Getting Started에 있는 사용 법 중 나에게 가장 잘 맞는 방법으로 적용하면 된다

 

 

나는 이렇게 CDN방식으로 Html 코드 내에 복붙해서 해당 플러그인을 적용했다. 이렇게하면 플러그인은 성공적으로 적용되었고 이제 툴 팁을 화면내에 적용을 시켜줘야한다. 적용하는 코드는 아래와 같다

 

 

tippy('#bread', {
  theme: 'custom',
  content: "Bread",
  followCursor: true,
  animation: 'fade',
  //클릭 이벤트 시 막기
  touch: 'hold',
  triggerTarget: document.querySelector('#trigger')
});

자바 스크립트 파일에서 tippy를 호출하고 어떤 영역에 마우스를 올렸을 때 이벤트가 적용되게 할 것인지 CSS 셀렉터를 적어주고 어떤테마 쓸지 커서는 따라다니게 할건지 어떤 에니메이션 쓸지 세세한 것들을 써주면 된다. 사실 이것들은 플러그인 홈페이지에 훨씬 더 자세하고 정성스럽게 나와있고 이벤트 종류 스타일도 어떤것들이 있는지 잘 설명되어있으니 보고 마음에 드는 것으로 사용하면 된다. 

 

나는 이렇게 툴팁을 적용한 뒤에 약간의 문제를 마주했는데 그게 무었이냐면 모바일 환경에서의 동작이었다. 툴 팁을 클릭해서 등장하는 새로운 창 위에 계속 툴팁이 동동 떠다니는 문제였다. 모바일은 마우스의 개념이 없기 때문에 터치 이벤트가 끝이었는데 아무래도 내가 마지막으로 터치한 요소 위에 계속 포커스가 있어서 툴팁이 사라지지 않는 것 같았다.

 

개발을 1도 모르는 나는 열심히 스텍오버플로우 뒤져서 방법을 찾았고 클릭시 이벤트를 막아주는 코드를 추가해서 이 문제는 해결할 수 있었다. Tippy를 쓰면서 혹시나 나와 같은 문제를 해결하고 싶은 분이 있다면 여기에요 여기

 

 

툴팁을 적용한 것으로 끝! 이면 좋겠지만 나는 내 홈페이지에 어울리는 룩의 이미지와 같은 툴 팁을 만들기 원했기 때문에 제작된 툴 팁을 커스텀 하는 작업을 추가로 해줬었다. CSS코드는 아래와 같다 :) 

 

 

.tippy-box[data-theme~="custom"] {
  background-color: #f7f7f7;
  color: black;

  padding: 10px 15px;
  border: 1px solid #000000;
  border-radius: 100px;
  font-size: 1.3rem;
}

이렇게 하면 귀염뽀짝 큐트한 나의 홈페이지에 걸맞는 툴팁 제작이 완료된다. 다 만든 홈페이지 이제와서 부랴부랴 다시보면서 어떻게 썻더라 하며 쓰는 글인데 코드를 보니 언제 한 번 정리좀 해줘야겠다 싶다... 쓰지도 않는 코드들이 난장판으로 있기 때문에 이 글을 쓰면서 다시 돌아볼 수 있는 계기가 된 것 같아 언젠가 다시 정리된 코드로 재배포 해야지 다짐하며 글은 마무리 :)