Кликабельное информационное поле

Question

Как я могу отредактировать JS (или CSS?) Для этой страницы (http://thepostrider.com/2018-senate-election/)), чтобы «информационное окно» перестало давать сбои, и сделать каждое состояние кликабельным, чтобы всплывающая информационная панель и Вы могли бы прочитать его, пока не перейдете в другое состояние?

Вот JS:

    $("path, circle").click(function(e) {
  $('#info-box').css('display','block');
  $('#info-box').html($(this).data('info'));
});

$("path, circle").mouseleave(function(e) {
  $('#info-box').css('display','none');
});

$(document).mousemove(function(e) {
  $('#info-box').css('top',e.pageY-$('#info-box').height()-30);
  $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();

var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(ios) {
  $('a').on('click touchend', function() {
    var link = $(this).attr('href');
    window.open(link,'_blank');
    return false;
  });
}

Answer 1

В CSS вы можете изменить положение информационного поля как absolute вместо relative. Когда вы это сделаете, это не повлияет на положение оставшегося сайта. Затем вам нужно будет указать правильные координаты в информационном окне для размещения его на странице.

Как наложить один div на другой div

Здесь есть подробное объяснение в ответах.