[CSS] 이미지 맵(Image Map)에 각각 다른 툴팁(Tooltip) 적용

[그림 1] 이미지 맵에서 툴팁 사용하여 얻은 산출물

 

[그림 1]과 같이 이미지 맵에서 툴팁을 사용하고자 하였다. 여기서 소개하고 있지 않은 방식으로 먼저 시도를 했었는데 붉은색으로 표시된 서클 세 곳에 각각 다른 툴팁이 표시되어야 하는데 같은 툴팁 하나만 표시되는 문제가 있어 검색 끝에 아래의 사이트를 찾게 되었다.

 

https://codeconvey.com/responsive-image-map-with-hover/

Responsive Image Map with Hover Tooltip - Codeconvey

위 사이트에서 제공하는 코드를 이용해 각 좌표마다 다른 툴팁을 보여주는 원하는 결과물을 얻을 수 있었다.

기능적으로는 원하는 결과를 얻었으나 디자인을 수정하는 일에 익숙하지 않아 시간이 많이 소요되었다. 그러다 아래의 사이트를 찾게 되어 도움을 받았다. 원하는 디자인을 눈으로 보며 선택하고 그에 맞는 코드를 얻을 수 있다. 

 

https://projects.verou.me/bubbly/

Bubbly — CSS speech bubbles made easy