Как сделать кастомные тултипы в определённых областях изображения?

Question

[Александр]

Здравствуйте. Столкнулся с нетривиальной для себя задачей: есть фотография десятка людей, необходимо её разместить в шапке сайта, сделав функционал, при котором при наведении на человека он будет подсвечиваться (ховер) и при клике выводить тултип над выбранным человеком, при этом затемнить экран.

Как я понимаю, надо вырезать фотографии всех людей, чтобы выводить их при наведении / клике, но как определять позиционирование наложений, на каком участке был клик, чтобы вывести нужный тултип в нужном месте с нужным текстом?

Пример реализации нашёл на https://whitewill.ru/, но поковыряв код, не разобрался, как его использовать в своём проекте. Может, есть какая-то библиотека, которая помогает такое реализовать? Или можно всё сделать проще? Подскажите, пожалуйста :)

Answer 1

[Andrew]

Я бы этим пробовал.
Тут более детально.

Answer 2

[Ivan Bogachev]

Или можно всё сделать проще?

Так у них [на сайте, на который вы ссылку дали] и так все просто:

1. Есть SVG, в которую через image воткнули картинки. Это обычные png с прозрачным фоном. Каждый человек - отдельная картинка. Можно еще сделать маску вокруг каждого человека, чтобы буквально вырезать его по контуру и определять наведение не по прямоугольнику (как у них), а по силуэту
   
2. Зная положение каждого человека, можно нарисовать текст над ним. Это можно как внутри SVG сделать (но тогда адаптировать сложно будет), так и с помощью обычных div`ов и абсолютного позиционирования из CSS. Если сделать viewbox='0 0 100 100' у SVG, то считать будет проще.
   
3. При наведении на человека (думаю про addEventListener вы знаете):
   
   • Берем большой прямоугольник в SVG, заливаем его черным полупрозрачным, таким образом делается затемнение. Показываем его.
     
   • Человека можно заменить другим человеком (как сделано на том сайте), или применить к нему какой-нибудь фильтр, чтобы цвета изменить. В любом нормальном графическом редакторе вы найдете кучу фильтров.
     
   • Показываем текст
     
     Когда я говорю "показываем" я имею в виду, что есть миллион способов сделать это, от банального отключения display:none или изменения прозрачности и до хитрых анимаций с SVG-масками или еще чем-нибудь.