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

If the segment 2 shouldn't be responsive you can just use a :before element and adjust the offset left of the segment 1:

const $b1 = $("#box1");
const $b2 = $("#box2");
const $line = $("#line");

const coordinates = function() {
  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 - 20, // remove segment 2's width
      top: offsetY
    });
}

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

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

.box:before {
  position: absolute;
  transform: translate(-100%, -50%);
  top: 50%;
  content: '';
  width: 20px;
  height: 1px;
  background: black;
}

#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;
}

10%
www.google.com