Question

javascript的新手，并尝试在SVG地图上定位元素/路径的工具提示顶部中心。目前，工具提示遵循.mousemove，但希望它固定在顶部中心，最好略微偏移，因此它几乎不会与所选区域重叠。

这是关于JSfiddle的代码：https://jsfiddle.net/mwalker005/a8vrmw06/

＆＃13;

$("path, polygon").hover(function(e) {
  $('#info-box').css('display','block');
  $('#info-box').html($(this).data('info'));
});

$("path, polygon").mouseleave(function(e) {
  $('#info-box').css('display','none');
});

$(document).mousemove(function(e) {
  $('#info-box').css('top',e.pageY-$('#info-box').height()-40);
  $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();

var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(ios) {
  $('abbr').on('click touchend', function() { 
    var link = $(this).attr('href');   
    window.open(link,'_blank');
    return false;
  });
}

＆＃13;

#map-example{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}


path:hover, polygon:hover {
  fill: #20487c !important;

}

#info-box {
  background-color: #333;
  border-bottom: 3px solid #3498DB;  
  color: #fff;
  display: none;
  font-family: arial;
  left: 0px;
  padding: 5px;
  position: absolute;
  top: 0px;
  width: 150px;
  z-index: 1;
}

#info-box:after {
    content: '';
    display: block;  
    position: absolute;
    left: 35px;
    top: 100%;
    width: 0;
    border: 10px solid transparent;
    border-top-color: #3498DB;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<div id="info-box"></div>

<svg version="1.1" id="map-example" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 300 200" style="enable-background:new 0 0 300 200;" xml:space="preserve">
<path id="area 01" data-info="<div>Area 01:</div><div>More Info about area</div>" fill="#D3D3D3" d="M90.5,72.5v12l7,1v12h20l3-27C120.5,70.5,108,77,90.5,72.5z"/>
<path id="area 02" data-info="<div>Area 02:</div><div>More Info about area</div>" fill="#D3D3D3" d="M89,72v14l7,1v12h21v17l-23-2l-11-6V93c0,0-6-7-16-5l5-33C72,55,80,59,89,72z"/>
<polygon id="area 03" data-info="<div>Area 03:</div><div>More Info about area</div>" fill="#D3D3D3" points="120,87 119,97 119,112 138,120 155,108 155,93 136,83 "/>
<polygon id="area 04" data-info="<div>Area 04:</div><div>More Info about area</div>" fill="#D3D3D3" points="138,122 143,131 146,129 152,137 155,135 159,138 159,152 174,146 199,131 
	225,117 219,108 199,108 170,101 157,94 156.5,108.5 "/>
<path id="area 05" data-info="<div>Area 05:</div><div>More Info about area</div>" fill="#D3D3D3" d="M122,70l-2,15l17-4l33,18l15,3l15-9l-21-29l-5,3l-17-19c0,0-16,10-22,15
	C127.9,68.9,122,70,122,70z"/>
<path id="area 06" data-info="<div>Area 06:</div><div>More Info about area</div>" fill="#D3D3D3" d="M158,47.2l16.8,18.1l4.9-3l22.7,31.2l-15.8,10L198,106l22.7,1l5.3,9l12-6l7.5-27.1
	l-4.9-20.1l-24.7-32.2c0,0-7.9-8-20.8-1l-3-3C192.1,26.6,175,36,158,47.2z"/>
<polygon id="area 07" data-info="<div>Area 07:</div><div>More Info about area</div>" fill="#D3D3D3" points="102,117 101,139 93,145 95,150 95,156 90,156 87,150 83,150 83,157 73,157 
	73,154 78,150 70,137 67,139 65,134 67,130 75.5,129.5 79.5,122.5 83.5,110.5 94.5,116.5 "/>
<polygon id="area 08" data-info="<div>Area 08:</div><div>More Info about area</div>" fill="#D3D3D3" points="81,95 81,108 78,121 74,128 65,128 63,132 54,132 54,128 40,127 40,122 
	43,122 47,117 51,117 51,110 56,110 56,95 63,95 67,90 70,90 77,91 "/>
<polygon id="area 09" data-info="<div>Area 09:</div><div>More Info about area</div>" fill="#D3D3D3" points="104,118 119,118 119,114 135,121 142,133 146,131 151,138 147,141 141,136 
	120,150 104,137 "/>
</svg>

＆＃13;

Answer 1

实际上，您使用mouseleave处理程序隐藏工具提示和mousemove处理程序以使工具提示跟随鼠标...

评论所有这些。

向每个polygon和path添加数据属性。比如，例如：

<path id="area 01" data-tooltip-left="33" data-tooltip-top="22" data-info="<div>Area 01:</div><div>More Info about area</div>" fill="#D3D3D3" d="M90.5,72.5v12l7,1v12h20l3-27C120.5,70.5,108,77,90.5,72.5z"/>

然后像这样修改你的hover处理程序：

var timeout;
$("path, polygon").hover(
  function() {
    clearTimeout(timeout);
    console.log($(this)[0].tagName);
    $('#info-box').css({
      'display':'block',
      'position':'fixed',
      'top':$(this).offset().top + parseInt($(this).data("tooltip-top")),  // 22px added
      'left':$(this).offset().left + parseInt($(this).data("tooltip-left"))  // 33px added
    });
    $('#info-box').html($(this).data('info'));
  },
  function(){
    timeout = setTimeout(function(){
      $('#info-box').css('display','none');
    },1000);
  });

timeout变量只是为了防止鼠标碰到工具提示时的运球效果。

.hover()处理程序中的第一个函数是mouseenter操作。第二个是mouseleave动作。

请注意，仅在mouseleave上实例化超时...并且＆＃34;禁用＆＃34;或重置＆＃34;在mouseenter以防止运球。

现在，关于＆＃34;居中＆＃34; ... 由于你的多边形有不规则的形状，这可能很难。但是使用数据属性，按形状塑造......有一些事情可以做。

你的乐趣从那里开始 ;）

Updated Fiddle（没有那个中心方面）

Last Fiddle（以中心解决方案......寻找＆＃34;区域06＆＃34;）

修改
有一个＆＃34; resize＆＃34; aspect ...并且SVG大小与工具提示大小不是线性相关的。在与它斗争的同时，我厌倦了小提琴一直愚蠢的烦恼，所以我继续这个CodePen我已经关闭了......

如何定位工具提示顶部路径中心？ SVG地图

1 个答案: