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

编程问答 2022-05-25

问题描述

我已将 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);
  });

解决方法

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

好吧，以前的答案是在 JsFiddle 中，现在又将在 JsFiddle 中.. 那么为什么要添加不必要的代码段，但必须添加因为 stackoverflow 要求它.. 第二个答案：JsFiddlev2

height:100vh
$("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;
}

hoverjavascriptrectrectsvgsvgsvg