CODEWITHSUNDEEP
javascript
ant
ant

Reputation: 22948

Trigger event from JavaScript

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

Upvotes: 2

Views: 284

Answers (3)

outis
outis

Reputation: 77400

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

Upvotes: 3

Cesar
Cesar

Reputation: 3519

You can capture the mouse position: http://www.codelifter.com/main/javascript/capturemouseposition1.html

Upvotes: 1

rahul
rahul

Reputation: 187030

Get the x and y coordinates when the mouse is clicked. Position the tooltip[probably will be a div] at the specified x and y coordinates.

To get the coordinates see

event.clientX and event.clientY

Upvotes: 0

Related Questions