Tool tip in html

Question

I have a div that needs to be identified using a line and box(which will contain a message) like in the below mockup image.2 and 3(Line and a rectangular box) are fixed to each

Answer 1

I used SVG to define the line.

I am sorry it is not in jQuery.

// Thanks to: https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event
// Thanks to: https://stackoverflow.com/a/6239882/2182349

// This is demo code - obviously it could be refined

let tooltip = document.getElementById("tooltip");

document.addEventListener("dragstart", function(event) {
  // store a ref. on the tooltip elem
  tooltip = event.target;
  // make it half transparent
  event.target.style.opacity = .5;
  let style = window.getComputedStyle(event.target, null);
  event.dataTransfer.setData("text/plain",
    (parseInt(style.getPropertyValue("left"), 10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY));
}, false);

document.addEventListener("dragend", function(event) {
  // reset the transparency
  event.target.style.opacity = "";
}, false);

/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
  // prevent default to allow drop
  event.preventDefault();
}, false);

document.addEventListener("drop", function(event) {
  // prevent default action (open as link for some elements)
  event.preventDefault();
  let offset = event.dataTransfer.getData("text/plain").split(',');
  tooltip.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
  tooltip.style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
  drawLine(tooltip);
}, false);

let clientRect = document.getElementById("anchor").getBoundingClientRect();
let line = document.getElementById("line");
let points = line.points;
let first = points.getItem(0);
first.x = clientRect.x + clientRect.width / 2;
first.y = clientRect.y + clientRect.height / 2;

drawLine(tooltip);

function drawLine(endElement) {
  let clientRect = endElement.getBoundingClientRect();
  let line = document.getElementById("line");
  let points = line.points;
  let last = points.getItem(2);
  last.x = clientRect.x + clientRect.width / 2;
  last.y = clientRect.y + clientRect.height / 2;
  let length = Math.sqrt(Math.pow(first.x - last.x, 2) + Math.pow(first.y - last.y, 2));
  let middle = points.getItem(1);
  if (first.x > last.x) length = -length;
  middle.x = first.x + length / 2;
  middle.y = (first.y > last.y) ? last.y : first.y;
}

body {
  margin: 0;
  padding: 0;
}

.box {
  position: relative;
  background: #fff;
  display: inline-block;
  border: 1px solid #000;
  width: auto;
  padding: 3px;
  text-align: center;
}

#anchor {
  top: 150px;
  left: 100px;
}

#tooltip {
  top: 10px;
  left: 400px;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  width: 100%;
  height: 100%;
}

  Tool tip

www.google.com