[ styled-components ] 특정 element hover시 tooltip 보여주기

📍 styled-components를 이용해 특정 element hover시 tooltip 보여주기

React에서 styled-component로 디자인 작업 중 제목 그대로 특정 element에 마우스 hover시 tooltip을 보여주는 스펙이 있었다. 이때까진 특정 element에 hover만 하면 끝이었는데, 추가로 tooltip까지 동작하게 하는 것은 처음이었다.

 

내키는 대로 코드를 작성했는데, 원하는 대로 작동하지 않았다. 공식문서를 찾아보니 component selector 패턴을 통해 스타일에 지정된 다른 구성 요소를 보간하여 자동으로 생성된 클래스 이름을 참조할 수 있는 강력한 패턴이라고 나와있었다. 즉, styled로 선언한 컴포넌트를 다른 클래스에서 호출 할 수 있다는 이야기인데, 이 단서만으로는 원인을 해결하지 못했다.

 

긴 삽질 끝에 원인을 찾았는데, 첫번째는 styled 순서를 잘못 선언했고, 두번째는 Tooltip 컴포넌트의 렌더링 위치가 target 컴포넌트보다 먼저 선언했기 때문이었다.

728x90

결론적으로 다음과 코드를 작성했을 때 정상적으로 동작하는 것을 확인할 수 있다.

See the Pen styled-component hover by an (@YWTechIT) on CodePen.