How to make such a thing?

Question

css

How is this done?
i.e. each dot is a link (when clicked, the title will be displayed in tabs) with hover a pointer should appear. which will point to the header.
How to make something like this? If possible, with an example.

Answer 1

Look at the html5 map and area tags. You can apply them, for example, if you need to set the location coordinates on the map. A map can be a simple image. Here is an example of semantics: www.wisdomweb.ru/HTML5d/html5_area.php
Or
www.w3schools.com/tags/tryit.asp?filename=tryhtml_...
Cross browser.
The points are set in the tag by the attributes coords='3,8,72,75', that is, the coordinates, where you set them yourself for each point. This will of course take longer than with position: absolute; in a section with position: relative; but it’s more correct + you learn something new for yourself. The hover bar can be made a picture and not suffer. Just add the :hover property to the link where the path to the correctly cut image with the line will be specified.
Although the comment from Sergey also works. Here you already need to look in the direction of whether your source code will be checked and, of course, the desire to make it more correct) Good luck!

Answer 2

Just tags with position: absolute; where PNG is a picture of a circle. The strip before the title appears when hovering on the tag (you can also set your own strip from each point as an absolute).
Handle clicks on js.