How to make custom tooltips in certain areas of the image?

Question

css

Hello. I faced a non-trivial task for myself: there is a photo of a dozen people, it is necessary to place it in the header of the site, making a functionality in which, when hovering over a person, it will be highlighted (hover) and when clicked, display a tooltip over the selected person, while darkening the screen.
As I understand it, you need to cut out the photos of all people in order to display them on hover / click, but how to determine the positioning of the overlays, on which section was the click, in order to display the right tooltip in the right place with the right text?
I found an implementation example on https://whitewill.ru/, but after digging into the code, I did not figure out how to use it in my project. Maybe there is some library that helps to implement this? Or can everything be done easier? Tell me please :)

Answer 1

I would try this .
Here in more detail.