[GoogleChart] 툴팁 깜빡임 문제 해결

구글 차트를 사용하다보면 차트의 끝부분과 툴팁이 만나는 지점에 커서를 올리면 아래 그림처럼 툴팁이 빠르게 깜빡입니다.
Flickering

기능에는 크게 문제가 없어보이지만 아무래도 깜빡이지 않게 하는게 좀더 완벽해 보이기도 하고, 이슈로 파악될 수 있기때문에 위 문제를 해결해보겠습니다.

저도 위 문제로 해결책을 찾다가 StackOverflow에 해외의 선배 개발자님께서 해결책을 올려주신걸 보았습니다.

아주 쉽게 해결을 할 수 있는데요 CSS에

1
svg > g > g:last-child { pointer-events: none }

위 코드만 추가해주면 됩니다.
pointer-events는 해당 요소에 이벤트를 설정할 수 있는 속성인데 해당부분을 none으로 설정하므로서 이벤트가 발생하지 않게 처리해주는거 같습니다.

위 CSS를 적용하고 다시 확인하면 기대했던것 처럼 툴팁이 깜빡 거리지 않는걸 확인할 수 있습니다.

공유하기