logo

[CSS] pointer-events로 tooltip 에러 해결하기

* 관련 기술 스택이 없습니다
emoji

• Bar 차트에 마우스를 올렸을 때 tooltip이 나타나는 기능을 추가하려 했으나, 마우스가 움직일 때마다 onMouseEvent가 발생하여 tooltip 관련 state가 초기화되는 문제가 발생했다.
• 문제를 해결하기 위해 CSS 속성 중 하나인 'pointer-events'를 사용했다. 'pointer-events'는 포인터의 이벤트 대상을 설정하는 속성으로, 'none'을 적용하면 해당 요소의 마우스 이벤트가 무시된다.
• 이를 통해 tooltip 요소에 마우스 이벤트가 발생하지 않도록 설정하여, 마우스가 tooltip을 떠날 때 mouseleave 이벤트가 발생하지 않게 했다.
• 하지만, 이 방법은 tooltip에 추가적인 마우스 이벤트가 필요한 경우에는 적용하기 어렵다. 이번 문제를 통해 기본적인 지식의 중요성을 다시 한번 깨달았다.

thumbnail
북마크
공유하기
신고하기
4분 분량
조회수 209
profile-image예리엘
2년 전
Copyright © 2025. Codenary All Rights Reserved.