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 would suggest you use a png image for the line part, or an svg. It would be much easier.

Short answer, because the code has already been given by others above.

Answer 2

Better you can use a plugin for this

https://anseki.github.io/leader-line/

Answer 3

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

<svg height="200" width="500">
        <polyline id="line" points="0,0 0,0 0,0" style="fill:none;stroke:black;" />
        </svg>
<div id="tooltip" class="box" draggable="true">
  Tool tip
</div>
<div id="anchor" class="box">www.google.com</div>

Answer 4

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


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

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

Answer 5

Here's some CSS. For the tool tip container use class="tooltip" and for the <span> of the tool tip text use class="tooltiptext".

.tooltip{position:relative;display:inline-block;
border-bottom: 1px dotted black; /* if you want dots under the hoverable text */
}
.tooltip .tooltiptext{visibility:hidden;width:120px;
background: #555; /* or whatever color you want the tool tip background to be */
color: #fff; /* or whatever color you want the tool tip text to be */
text-align:center;padding:5px 0;border-radius:6px;position:absolute;
z-index:1;bottom:125%;left:50%;margin-left:-60px;opacity:0;transition:opacity 0.3s;}
.tooltip .tooltiptext::after{content:"";
position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;
border-style:solid;border-color:#555 transparent transparent transparent;}
.tooltip:hover .tooltiptext{visibility:visible;opacity:1;}