Question

Let me try and be as much clear as possible although it won’t be easy. OK, I have a circle inside div, and I know the x and y coordinates of the circle inside this div.

How could I create JavaScript or HTML tooltip to point at the spot where I clicked (in this case the circle)?

Here is the image so you can better understand what I’m trying to do:

Here is the picture

Now I know some of you will think: why not just use the id of circle and get the tooltip to point to that direction? Well because the circle is dynamically created as a JavaScript object and is not part of the HTML.

Because drawing saves time: where can I find a tooltip script pointing from above? Something like this, here goes another:

Screen shot

Answer 1

If you’re wondering about positioning the tooltip, use styling. Give the parent element relative position and the child absolute position in a style sheet:

#canvas {
    position: relative;
}
.tooltip {
    position: absolute;
}

When you create the tooltip, give it the ‘tooltip’ class and set its style.left and style.top properties. Try something like:

function click(evt) {
   if (! tooltip) {
       tooltip = document.createElement('div'); // or what-have-you
       tooltip.className += ' tooltip';
   ...
   tooltip.style.left = evt.offsetX + 'px';
   tooltip.style.left = evt.offsetY + 'px';