带有坐标跟随且在可见区域内的 SVG 悬停信息框，没有溢出

Question

我为我的事业阅读了flipfit is the solution，但我未能将它与existing coordinate follow 整合。这个想法是，用户将鼠标悬停在 SVG 矩形上，出现的信息框不仅需要跟随光标的坐标，还需要考虑矩形的位置。也就是说，如果矩形位于最左侧，则信息框会调整其坐标并因此显示在可见屏幕区域内的右侧。目前我要么有一个，要么跟随坐标，要么显示在屏幕的可见范围内。如何混合它们？

JSFiddle here.

HTML (SVG)

<div id="info-box"></div>
 
<svg width="459px" height="593px">

<rect x="10" y="10" width="100" height="50" data-info="<div><b>Bla:</b> Bla</div><div><b>bla:</b> NMore blabla</div>"></rect>

<rect x="380" y="10" width="100" height="50" data-info="<div><img src='https://upload.wikimedia.org/wikipedia/commons/4/42/Cute-Ball-Go-icon.png' width='30px'></div><div><b>Stasdf</b> wsdfsdfer</div><div><b>Csdfsdfage:</b> Nosdfsdf</div>"></rect>

<rect x="70" y="230" width="100" height="50" data-info></rect>

</svg>

CSS

rect{
  fill:blue;
}


#info-box {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  padding: 0px;
  font-family: arial;
}

JS

$("rect[data-info!='']").hover(function(e) {
  $("#info-box").css("display", "block");
  $("#info-box").css("color", "#ffffff");
  $("#info-box").css("background-color", "#212121");
  $("#info-box").css("padding", "15px");
  $("#info-box").css("opacity", "0.8"); 
  $("#info-box").html($(this).data("info"));
  });
  
  $("rect[data-info!='']").tooltip({
  position: {
        my: "center bottom-25",
        at: "center top",
        collision: "flipfit",
    }});

$("rect[data-info!='']").mouseleave(function(e) {
  $("#info-box").css("display", "none");

});

$(document)
  .mousemove(function(e) {
    $("#info-box").css("top", e.pageY - $("#info-box").height() - 35);
    $("#info-box").css("left", e.pageX - $("#info-box").width() / 2);
  });

Answer 1

我尽了最大努力...请看...这是JSFiddle 解决方案...由于某种原因它在stackoverflows 编辑器中不起作用...jquery 版本不匹配可能...

之前的答案是在 JsFiddle 中，现在又是在 JsFiddle 中。那么为什么要添加不必要的 sn-p 但必须添加因为 stackoverflow 要求它。第二个答案：JsFiddlev2

$("rect[data-info!='']").each(function(e) {
  $("body").append(`<div id="info-box${e}"></div>`);
  $("#info-box" + e).html($(this).data("info"));
  let a = $(this).attr("id");
  a = "target" + e;
  $(this).attr("id", a);
  $("#info-box" + e).dxPopover({
    target: `#target${e}`,
    showEvent: 'dxhoverstart',
    hideEvent: 'dxhoverend'
  });
});

rect {
  fill: blue;
}

#info-box {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  padding: 0px;
  font-family: arial;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css">
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css">
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.2.5/js/dx.all.js"></script>

<svg width="459px" height="593px">

<rect x="10" y="10" width="100" height="50" data-info="<div><b>Bla:</b> Bla</div><div><b>bla:</b> NMore blabla</div>"></rect>

<rect x="380" y="10" width="100" height="50" data-info="<div><img src='https://upload.wikimedia.org/wikipedia/commons/4/42/Cute-Ball-Go-icon.png' width='30px'></div><div><b>Stasdf</b> wsdfsdfer</div><div><b>Csdfsdfage:</b> Nosdfsdf</div>"></rect>

<rect x="70" y="230" width="100" height="50" data-info></rect>

</svg>