Tooltip 작업진행

Grace·2020년 7월 7일
0

twmc-react-components

목록 보기
3/3
post-thumbnail

3번째 component : Tooltip

📌 참고하였습니다
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip

내 개인 페이지에 넣을 component들을 우선적으로 만들다 보니
프로필 페이지로 넘어갈 때 사용할 tooltip이 필요했다.

처음에 해야겠다 생각했을 때에는 '아 너무 간단한것만 하는건가...'싶어서
좀 그랬는데, 예시를 찾아보려고 리서치를 하다보니
css부터가 꽤나 복잡한 것이었다....

1단계 : css로 hover기능 추가하여 숨겨진 텍스트 띄우기

css 파일을 import 하는 방법은 지양하고 있지만
우선은 모양을 구현하는게 첫번째였기 때문에 css 파일을 사용해서 만들기로 했다.

참고 사이트를 보면서 어떤 속성들이 필요하고 어떻게 사용해야 하는지
파악한 후 만들기 시작했다.

  1. 제일 중요한 부분은 hover하는 태그가 아닌 제3의 태그?가 보여져야 하는 것이어서
.tooltip:hover .tooltipText {
	visibility: visible;
	opacity: 0.8;
}

이런식의 hover 사용이 필요했다.

  1. hover시 띄워지는 메세지박스를 위해서는 말풍선모양의 박스가 필요했는데,
    그 밑부분 뾰족한 삼각형 모양을 따로 만들어서 붙혀주어야 했다.
    위치를 잡기 위해서도 absolute를 사용해야했다.
    그래서 css에서 :after를 사용해서 만들어주기!
.tooltipText:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  

2단계 : styled-components로 바꿔서 만들기


위처럼 className을 사용하면 쉽게 구현해낼 수 있었지만
최근엔 css-in-js를 사용하는 추세라고 하니까...

내가 아직 모르는 css 선택자들이 많아서인지 hover 하는 방법에 대해서
갈피를 못잡고 있었다.
그러던 중 '인접형제선택자' 라는 +기호를 알게되었는데
인접한 컴포넌트를 앞선 컴포넌트에서 조절할 수 있는걸 알게되었다.

그래서 위의 코드와 같은 기능을 하는코드를 작성할 수 있었다.

&:hover {
  & + span {
    visibility: visible;
    opacity: 0.8;
  }
}

또다시 생긴 난관...

그런데 vs code로 작성하려다 보니 또 문제가 생겨버렸다.
props를 사용해서 component를 작동시키다 보니,
두 component가 형제관계가 아니라서 적용이 안되는것......

하지만 나는 인접형제선택자를 알게 된 이후로, 그렇다면 부모형제선택자라는 것도
있을 것이란 생각을 할 수 있게 되었다.ㅎㅎㅎㅎㅎㅎ
그래서 바로 리서치를 했더니 >기호로 적용을 할 수 있었다!

무려 styled-components로! 이제 난 무적이야(?) 😎

코드샌드박스로 test 완료❗️
https://codesandbox.io/s/sharp-yonath-try5v?file=/src/App.js

3단계 : props로 스타일 조정 가능하게 베이스 만들어두기

boards에서는 간단하게 tooltip을 조정할 수 있게 만들어주어야 했기 때문에
index에서 모든걸 다 만들어두어야 하는데...

mode ➨ dark | bright

밝은모드와 어두운모드를 제외하고도
사용자가 맘대로 색상을 선택할 수 있게 하고 싶었는데
이건 뭐 타입이 다른것도 아니라서... 이전에 만들어진걸 참고해서도
만들기가 어려워서 좀 더 걸릴 것 같다.
우선은 두가지 모드로 사용해봐야겠다. 색상이 중요한건 아니니까!

direction ➨ top | bottom | left | right

포트폴리오에서 tooltip을 다루다보니 위치를 바꿔서 나타내줘야 하는 상황이
생길 수 있겠다는 생각을 하게 되었다.
그래서 4방면으로 위치를 잡아줄 수 있도록 props를 지정해주기로 했다.

하지만 생각보다 복잡했다.
기존에 tooltip을 box에 &::after로 세모모양의 도형?을 붙혀준거라서
그 두가지를 tooltip의 내용이나 label의 내용이 바뀌더라도
비율에 맞게 조정이 되도록 스타일링을 해주어야 했다.

그러다 보니 그 비율에 맞게 조정하는게 어려웠다ㅠㅠ
우선 좀 노가다로 만들긴 했는데
아마도 수정작업을 하던지 아니면 양 옆으로 지정하는걸 빼버리고
위아래 위치만 남겨둘 것 같다ㅎㅎㅎ

📌 code sandbox로 test중 ...
https://codesandbox.io/s/nice-galois-vugdv?file=/src/Tooltip.js:3900-4356

profile
쉽게 사는건 재미가 없더군요, 새로 시작합니다🤓

0개의 댓글