圖像地圖與Bootstrap工具提示沒有顯示在正確的位置

Question

我有一個圖像映射，當用戶將鼠標懸停在該圖像的特定部分上時，我想使用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>

Answer 1

我不是專家，但我覺得這是因為area元素沒有實際的高度或寬度。 它們的邊界是使用coords屬性建立的，這可能不是由bootstrap查看的。

可能有更好的方法來做到這一點，但一個簡單的解決方法是將下面的代碼添加到你的頁面。這將把工具提示與指針本身保持固定的距離。

這是一個有效的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');
}); 

Answer 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%' });
});

編輯：

我不得不放入工具提示箭頭行，因為Google Chrome正在弄亂工具提示箭頭的對齊方式。 不要認為這會在所有場景中發生，但由於我的頁面有可折疊的菜單，這些菜單會自行調整頁面大小，因此它們會將對齊關閉。

Answer 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});
        })

    });

Answer 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/看到