设置弹出框的页面

Question

我正在使用此处的代码：

'$("path, circle").hover(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;
});
}'

有关更多详细信息，请参见https://codepen.io/anon/pen/bmNEwV，已对其进行了松散的调整以使其可以在Wordpress网站上运行）以建立在以下页面上：http://thepostrider.com/testing-page/

我的问题是，是否可以轻松做到这一点：

1. “信息框”始终显示在地图上方
2. “信息框”中填充了上次单击状态中的内容，并且该状态突出显示了略有不同的颜色
3. 点击其他状态即可更改内容（尽管不会更改信息框的大小。