Javascript html中的工具提示

我有一个div，需要使用一条线和一个框（其中包含一条消息）来识别，如下图所示。2和3（线和一个矩形框）彼此固定，可以拖动，1（线）可以拉伸到任何方向。我已经创建了长方体，但我不知道如何在其上附加一条线。这是我试过的

js

Html

---

如果段2没有响应，您可以在元素之前使用

：并调整段1的左侧偏移：


const$b1=$（“#box1”）；
常量$b2=$（“#框2”）；
常量$line=$（“#line”）；
常量坐标=函数（）{
常量x1=$b1.offset（）.left；
常量y1=$b1.offset（）.top+$b1.height（）/2；
常量x2=$b2.offset（）.left+$b1.width（）/2；
常量y2=$b2.offset（）.top+$b1.height（）/2；
移动线（x1，y1，x2，y2）；
}
坐标（）；
功能移动线（x1、y1、x2、y2）{
变量长度=数学sqrt（（（x1-x2）*（x1-x2））+（（y1-y2）*（y1-y2））；
变量角度=数学atan2（y2-y1，x2-x1）*180/数学PI；
变量变换='旋转（'+角度+'度）'；
偏移量x=（x1>x2）？x2:x1；
偏移量=（y1>y2）？y2:y1；
$line.css({
'位置'：'绝对'，
“-webkit转换”：转换，
“-moz变换”：变换，
“变换”：变换
})
.宽度（长度）
.抵消({
左：offsetX-20，//删除段2的宽度
顶部：越位
});
}
$（'#box1'）。可拖动({
拖动：坐标
});
.box{
边框：1px纯黑；
背景色：#ffffff；
宽度：100px；
高度：40px；
右：0；
位置：绝对位置；
}
.盒子：以前{
位置：绝对位置；
转换：翻译（-100%，-50%）；
最高：50%；
内容：''；
宽度：20px；
高度：1px；
背景：黑色；
}
#第1行{
顶部：100px；
左：50px；
/*变换：旋转（222deg）；
-webkit变换：旋转（222deg）；
-ms变换：旋转（222deg）*/
}
.线路{
宽度：1px；
高度：1px；
背景色：黑色；
位置：绝对位置；
z指数：-1；
/*把线放在箱子后面*/
}
#框1{
顶部：150px；
左：150px；
}
#框2{
顶部：200px；
左：200px；
位置：相对位置；
}

10%
www.google.com
我使用SVG来定义行

很抱歉，它不在jQuery中


//多亏了：https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event
//感谢：https://stackoverflow.com/a/6239882/2182349
//这是演示代码-显然它可以改进
让tooltip=document.getElementById（“tooltip”）；
document.addEventListener（“dragstart”，函数（事件）{
//在工具提示元素上存储参考
工具提示=event.target；
//让它半透明
event.target.style.opacity=.5；
let style=window.getComputedStyle（event.target，null）；
event.dataTransfer.setData（“text/plain”，
（parseInt（style.getPropertyValue（“左”），10-event.clientX）+’，“+（parseInt（style.getPropertyValue（“上”），10-event.clientY））；
}，假）；
文件。添加事件列表器（“dragend”，函数（事件）{
//重置透明度
event.target.style.opacity=“”；
}，假）；
/*对投放目标发射的事件*/
文件。添加事件列表器（“dragover”，功能（事件）{
//防止默认值以允许删除
event.preventDefault（）；
}，假）；
document.addEventListener（“drop”），函数（事件）{
//防止默认操作（作为某些元素的链接打开）
event.preventDefault（）；
让offset=event.dataTransfer.getData（“text/plain”）.split（'，'）；
tooltip.style.left=（event.clientX+parseInt（偏移量[0]，10]）+'px'；
tooltip.style.top=（event.clientY+parseInt（偏移量[1]，10]）+'px'；
抽绳（工具提示）；
}，假）；
让clientRect=document.getElementById（“锚”）.getBoundingClientRect（）；
让line=document.getElementById（“line”）；
设点=直线点；
让第一个=点。getItem（0）；
first.x=clientRect.x+clientRect.width/2；
first.y=clientRect.y+clientRect.height/2；
抽绳（工具提示）；
功能抽绳（endElement）{
让clientRect=endElement.getBoundingClientRect（）；
让line=document.getElementById（“line”）；
设点=直线点；
let last=点。getItem（2）；
last.x=clientRect.x+clientRect.width/2；
last.y=clientRect.y+clientRect.height/2；
设length=Math.sqrt（Math.pow（first.x-last.x，2）+Math.pow（first.y-last.y，2））；
让中间=点。getItem（1）；
如果（first.x>last.x）length=-length；
中间.x=第一个.x+长度/2；
middle.y=（first.y>last.y）？last.y:first.y；
}
正文{
保证金：0；
填充：0；
}
.盒子{
位置：相对位置；
背景：#fff；
显示：内联块；
边框：1px实心#000；
宽度：自动；
填充：3倍；
文本对齐：居中；
}
#锚定{
顶部：150px；
左：100px；
}
#工具提示{
顶部：10px；
左：400px；
}
svg{
位置：绝对位置；
排名：0；
左：0；
z指数：-100；
宽度：100%；
身高：100%；
}

刀尖
www.google.com
您最好使用一个插件

我建议您对线条部分使用png图像，或者使用svg。这会容易得多

简短的回答，因为上面的其他人已经给出了代码。
这里是一些CSS。对于工具提示容器，使用
class=“tooltip”
；对于工具提示文本的
，使用
class=“tooltiptext”

.tooltip{位置：相对；显示：内联块；
边框底部：1px点黑色；/*如果您想在可悬停文本下添加点*/
}
.tooltip.tooltiptext{可见性：隐藏；宽度：120px；
背景：#555；/*或您希望工具提示背景的任何颜色*/
颜色：#fff；/*或您希望工具提示文本为的任何颜色*/
文本对齐：中心；填充：5px 0；边框半径：6px；位置：绝对；
z索引：1；底部：125%；左侧：50%；左边距：-60px；不透明度：0；过渡：不透明度0.3s；}
.tooltip.tooltiptext:：在{content:“”之后；
位置：绝对；顶部：100%；左侧：50%；左边距：-5px；边框宽度：5px；
边框样式：实心；bord
const $b1 = $("#box1");
const $b2 = $("#box2");
const $line = $("#line");

const coordinates = function() {
debugger;
  const x1 = $b1.offset().left;
  const y1 = $b1.offset().top + $b1.height()/2;
  const x2 = $b2.offset().left + $b1.width()/2;
  const y2 = $b2.offset().top + $b1.height()/2;

  moveLine(x1, y1, x2, y2);  
}

coordinates();

function moveLine(x1, y1, x2, y2) {
    var length = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
    var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
    var transform = 'rotate(' + angle + 'deg)';

    offsetX = (x1 > x2) ? x2 : x1;
    offsetY = (y1 > y2) ? y2 : y1;
    
    $line.css({
        'position': 'absolute',
        '-webkit-transform': transform,
        '-moz-transform': transform,
        'transform': transform
      })
      .width(length)
      .offset({
        left: offsetX,
        top: offsetY
      });
}

$('#box1').draggable({
  drag: coordinates
});

<div class="box" id="box1">10%</div>
<p id="box2">www.google.com</p>

<div class="line" id="line"></div>

.box {
  border: 1px solid black;
  background-color: #ffffff;
  width: 100px;
  height: 40px;
  position: absolute;
}

#line1 {
  top: 100px;
  left: 50px;
  /*transform: rotate(222deg);
    -webkit-transform: rotate(222deg);
    -ms-transform: rotate(222deg);*/
}

.line {
  width: 1px;
  height: 1px;
  background-color: black;
  position: absolute;
  z-index: -1; /* put line behind the boxes */
}


#box1 {
  top: 150px;
  left: 150px;
}

#box2 {
  top: 200px;
  left: 200px;
  position:relative;
}