SVG hover 信息框，坐标跟随且在可见区域内，无溢出

Question

我读到Flipfit 是我的事业的解决方案，但我未能将其与现有的坐标 follow集成。 这个想法是，用户将鼠标悬停在 SVG 矩形上，出现的信息框不仅需要遵循 cursor 的坐标，还需要考虑矩形的位置。 也就是说，如果矩形位于最左侧，则信息框会调整其坐标并因此显示在可见屏幕区域内的右侧。 目前我要么有一个，要么跟随坐标，要么显示在屏幕的可见范围内。 我该如何混合它们？

JSFiddle 在这里。

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 中。那么为什么要添加不必要的代码段，但必须添加因为 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>