I had to quickly add some dot points with names to a map the other day, so i thought i should probably look for a jquery library for tool tips or something similar. But then i thought why not just add these elements as CSS and then utilize the hover attribute to hide and show the labels. 

This is what i ended up with, a nice simple map image set to relative and then add the dot points to the map using the absolute positioning and this way you can easily move them all around the map, and they stay in the correct position as long as the map image stays the same height and width. 

Getting the Map Image

Just have a look on the free image sites such as unsplash.com and you should be able to find a map image you can use as a background. 

Adding the map image

You can do this in a simple div using the background element and then set the backgroound image to cover. Then make sure you set the width and height of the div to match the dimentions of the image, or the width of the element you are adding the image too, this needs to be set before adding the marker dots as the position of these will be based on the main map height and width. 

Adding a Title and Dot

The titles and dots can be added into the map-wrap div, and you can add as many as you like. Just make sure they dont overlay each other or it might get too confusing. 

To add a new title and dot, just add another class called map-dot-[number] and add the new title and move it around, you can use the percentage or the pixels depending on how accurate you need it to be. 

If you use the percentage it should scale as the image width is changed if you need it to work that way. 

Links

Codepen: https://codepen.io/kruxor/pen/WNzWpdK
Images: https://unsplash.com/photos/eyfMgGvo9PA https://i.imgur.com/qHVGYKx.jpeg