带有Bootstrap工具提示的图像映射未正确显示

Trisha 发表于 Dev

特里莎（Trisha）

我有一个图像映射，当用户将鼠标悬停在该图像的特定部分上时，我想使用Bootstrap提供的内置工具提示。

我遇到的问题是工具提示没有在正确的位置显示。现在，它显示在图像地图所有区域的图像的左上角。

如何在不单独重新定位每个工具提示的情况下将工具提示移动到它们各自的区域下？它应该自动在定义的rec中。

这是我正在使用的地图代码：

<img id="Image-Maps-Com-process-map" src="images/osh drawing.png" border="0" width="600" height="600" orgWidth="600" orgHeight="600" usemap="#process-map" alt="" />
<map name="process-map" id="ImageMapsCom-process-map">
<area  alt="" title="Wood Burning Stove" href="#" class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="478,186,572,296" style="outline:none;" target="_self"     />
<area  alt="" title="Rough Cut Lumber" href="#" class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="184,1,395,148" style="outline:none;" target="_self"     />
<area  alt="This is the description maybe" title="Distributing" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="45,398,304,577" style="outline:none;" target="_self"  />
<area  alt="" title="Shipping Materials" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="9,52,141,183" style="outline:none;" target="_self"     />
<area  alt="" title="Sawdust" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="302,311,410,385" style="outline:none;" target="_self"     />
<area  alt="" title="Electricity" href="#"class="tooltip-bot" data-original-title="Title text here" shape="rect" coords="430,0,570,113" style="outline:none;" target="_self"     />
<area  alt="manufacturing" title="Manufacturing" href="#"class="tooltip-bot" data-original-title="Title text here" shape="poly" coords="348,193,213,197,188,313,221,368,296,362,300,310,357,302,363,193" style="outline:none;" target="_self"     />
</map>

韦斯利·史密斯

我不是专家，但是我觉得这是因为area元素没有实际的高度或宽度。它们的边界是使用coords可能不会由引导程序查看的属性建立的。

也许有更好的方法，但是一个简单的解决方法是将以下代码添加到您的页面中，这将使工具提示与指针本身保持固定的距离。

这是一个工作的jsFiddle

$(document).mousemove( function(e) {    
    var mouseX = e.pageX - $('#Image-Maps-Com-process-map').offset().left - 40;
    var mouseY = e.pageY - $('#Image-Maps-Com-process-map').offset().top + 20;
    $('.tooltip').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。