带有引导工具提示的图像地图未在正确位置显示答案

【问题标题】：image Map with Bootstrap Tooltips not showing in correct spot带有引导工具提示的图像地图未在正确位置显示
【发布时间】：2015-05-08 06:02:07
【问题描述】：

我有一个图像映射，当用户将鼠标悬停在该图像的特定部分上时，我想使用 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>

【问题讨论】：

这只是Bootstrap，他们的代码都没有针对工具提示进行修改
在 Firefox 和 chrome 中，工具提示的位置不同。工具提示 div 具有相同的顶部，左侧位置，因此它显示在同一位置。
所以你说我需要通过CSS手动设置坐标才能正确显示？还是有更有效的方法？
奇怪的是它在 IE 中比 Chrome 或 FF 更好。奇怪
我认为你可以使用 Jquery。获取鼠标位置并根据鼠标位置显示。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

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

这是working 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');
});

【讨论】：

你非常接近 - 我唯一需要更改的是鼠标悬停的坐标：$('.tooltip').css({'top':mouseY-565,'left':mouseX-275}).fadeIn('slow');
现在我对其进行了更彻底的研究，这可能无法响应足够的工作。将坐标设置为现在的坐标后，它可以在 100% 的窗口中正常工作 - 但如果我将窗口缩小然后悬停，则工具提示位于完全不同的区域。我该如何解决这个问题？
我今晚下班后会更新，基本上你需要添加一些代码来检测窗口大小并调整偏移量
@Trisha 你用的是什么浏览器？我正在使用 chrome，但我没有看到这个问题。无论我如何更改窗口的大小，工具提示相对于该区域的距离都保持一致。这会发生在 jsFiddle 中、您自己的页面中，还是两者都发生？
DelightedDOD - 它发生在我的 Chrome、IE 和 FireFox 中 - 并且仅在网站上。我在想有什么东西在干扰它，但我不确定是什么。

【解决方案2】：

我知道这是一个相当古老且已回答的问题，但我想我会在遇到同样的问题并且在其他地方找不到确切答案时将其加入。我有一个网站使用较旧的 asp.net 图表控件，该控件在图表上绘制图像地图，以便显示工具提示。为了在其区域属性上使用工具提示并将它们放在正确的位置，我使用了下面的代码。请注意，我仍然必须使用抵消金额，但效果相当好。 “.maparea”是一个动态应用到所有地图区域属性的类。我还使用了鼠标悬停，因为我不需要工具提示不断移动。

$('.maparea').mouseover(function (e) {
    var position = $(this).attr('coords').split(',');
    x = +position[0];
    y = +position[1];
    $('.tooltip').css({ 'top': y + 60, 'left': x - 83 }).fadeIn('slow');
    $('.tooltip-arrow').css({ 'left': '50%' });
});

编辑：

我不得不输入工具提示箭头行，因为谷歌浏览器弄乱了工具提示箭头的对齐方式。不要认为这会在所有情况下都会发生，但由于我的页面有可以折叠的菜单，它们会自行调整页面大小，因此他们放弃了对齐方式。

【讨论】：

【解决方案3】：

我的弹出框解决方案（基于鼠标点击位置）：

var clickTop,clickLeft=0;
    $(document).click(function(e){
        clickTop =e.pageY;
        clickLeft =e.pageX;

    });
    $().ready(function(){
        var popovers=$('[data-toggle="popover"]');

        popovers.popover({
            placement: 'bottom center',
            html:true,
            trigger:'focus'
        }).on("shown.bs.popover", function(e){
            $('.popover').css({top:clickTop,left:clickLeft-100});
        })

    });

【讨论】：

【解决方案4】：

我采用了@Big EMPin 解决方案（右侧区域工具提示），所以它终于对我有用了：

<div style="position: relative;display: inline-block">
    <img style="max-width: 100%" src="../static/img/JavaPyramid.jpg" usemap="#courses">
</div>
<map name="courses">
    <area shape="rect" coords="120,10,200,85" href="/view/startjava" data-toggle="tooltip" data-placement="right" title="StartJava" class="maparea">
    <area shape="rect" coords="85,100,165,175" href="/view/basejava" data-toggle="tooltip" data-placement="right" title="BaseJava" class="maparea">
    <area shape="rect" coords="50,190,130,265" href="/view/topjava" data-toggle="tooltip" data-placement="right" title="TopJava" class="maparea">
    <area shape="rect" coords="20,280,100,355" href="/view/masterjava" data-toggle="tooltip" data-placement="right" title="MasterJava" class="maparea">
</map>
<script>
    $('.maparea').mousemove(function (e) {
      var pos = $(this).attr('coords').split(',');
      $('.tooltip').css({'left': parseInt(pos[2]) + 5, 'top': parseInt(pos[1]) + 35}).fadeIn('slow');
    });
</script>

解决方案见http://javaops.ru/

【讨论】：