Trigger event from JavaScript

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

You should be able to programmatically add a click handler to the circle, when clicked you'd have access to the top/left values for the circle and should be able to instantiate whatever you need at the appropriate location. Not posting this as an answer as it's just a pointer to get you looking in a right direction. — Lazarus
– Lazarus, Commented Nov 11, 2009 at 13:49
Thank you Lazarus for your guidance, I can't add it because I didn't write rest of the code, and the time is short. — ant
– ant, Commented Nov 11, 2009 at 13:52
jvenema - Picasso made a bull with horns using bicycle parts and it turn out well, I just tried something similar, didn't went anywhere near as expected.. but it saves words — ant
– ant, Commented Nov 11, 2009 at 13:56
@c0mrade: like this? craigsworks.com/projects/qtip/demos/position/corner — Crescent Fresh
– Crescent Fresh, Commented Nov 11, 2009 at 14:17
I do like it, but I can't use any external libraries, because the person who made this code made it javascript with some prototype functions, I'm sure adding jquery will only complicate things. got anything else ? — ant
– ant, Commented Nov 11, 2009 at 14:19

outis · Accepted Answer · 2009-11-11 15:02:25Z

3

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

answered Nov 11, 2009 at 15:02

outis

77.7k23 gold badges155 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cesar · Accepted Answer · 2009-11-11 13:47:44Z

1

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

answered Nov 11, 2009 at 13:47

Cesar

3,5192 gold badges32 silver badges43 bronze badges

Comments

rahul · Accepted Answer · 2009-11-11 13:47:34Z

0

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

answered Nov 11, 2009 at 13:47

rahul

188k50 gold badges239 silver badges266 bronze badges

1 Comment

ant Over a year ago

Thank you for your answer, I already have those values .. just looking how to position tooltip properly.

Collectives™ on Stack Overflow

Trigger event from JavaScript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related