Как сделать всплывающее окно у курсора мыши

Примерно так:

  

#text-block { 

  display: none; 

  position: absolute; 

  padding: 10px; 

  background-color: #f1f1f1; 

} 

 

 

Скрытый текст 

 

var image = document.getElementById("image"); 

var textBlock = document.getElementById("text-block"); 

// При наведении курсора на изображение 

image.addEventListener("mouseover", function(event) { 

  textBlock.style.display = "block"; 

}); 

// При уходе курсора с изображения 

image.addEventListener("mouseout", function(event) { 

  textBlock.style.display = "none"; 

}); 

// При перемещении курсора над изображением 

image.addEventListener("mousemove", function(event) { 

  var offsetX = 10; 

  var offsetY = -5; 

  // Вычисляем позицию блока с текстом относительно курсора 

  var left = event.pageX + offsetX; 

  var top = event.pageY - textBlock.offsetHeight + offsetY; 

  // Устанавливаем позицию блока с текстом 

  textBlock.style.left = left + "px"; 

  textBlock.style.top = top + "px"; 

}); 

 

По сути, навели курсор и пояляется блок с информацией
Можно воспользоваться в html тегом тег map у которого есть обязательные аттрибуты а это координаты нужного объекта ... навели, а это либо hover либо mousemove либо mouseover и показали блок с нужной вам информацией.

Очень просто эту задачу реализовать на тег svg , открыть inkscape обвести нужный объект и потом перенести в html весь код и остальные манипуляции делать уже на js либо на css а именно положить рядом блок, то самое модальное окно которое всплывает и потом уже делать css hover или же обработать всплытие этого блока на javascript => mousemove в общем сделать похожее поведение на hover, что на js сделать не сложно.

Проще использовать тот же react, vue в которых используется компонентный подход, а можно это сделать и вообще на голом html css svg javascript..