How to make custom tool tips in certain areas of the image?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
18 views
Hello. Faced with a non-trivial task for herself: have a photo of a dozen people, you need to place it in the header, making the functionality in which when you hover over the person it will be highlighted (hover) and when you click to display the tooltip above the selected person, thus dimming the screen.

As I understand it, it is necessary to cut out pictures of all the people to show them when hovering / clicking, but how to determine the positioning of the overlay in which area was click to display the desired tooltip in the right place with the right text?

An example implementation found at https://whitewill.ru/, but picking the code, have not figured out how to use it in your project. Maybe there is some library that helps to implement this? Or you can do everything easier? Tell me, please :)
by | 18 views

2 Answers

0 like 0 dislike
I would this tried.
There are more details.
by
0 like 0 dislike
Or you can do everything easier?

So they [the site you have given the link] so simple:
  1. There is SVG, which is stuck through the image of the picture. This is the usual png with a transparent background. Each person is a separate image. You can even make a mask around each person to literally cut it along the contour and to determine the guidance is not on the rectangle (as they have), and the silhouette
  2. Knowing the position of each person, you can draw a text over it. It can be inside the SVG to do (but then it would be difficult to adapt) and with conventional div's and absolute positioning of CSS. If you make the viewbox='0 0 100 100' in SVG, it is considered to be easier.
  3. When you hover over the person (I think you know about addEventListener):
    • Take a large rectangle in SVG, fill it with black semi-transparent, so is blackout. Show it.
    • A person can replace another person (as done on that website), or to apply some filter to make the colors change. In any normal photo editor you will find a bunch of filters.
    • Show text

      When I say "show" I mean that there are a million ways to do this, from the banal to disable the display:none or change transparency and to cunning animations with SVG masks or something.

by

Related questions

0 like 0 dislike
3 answers
0 like 0 dislike
1 answer
0 like 0 dislike
3 answers
0 like 0 dislike
4 answers
110,608 questions
257,187 answers
0 comments
40,796 users