Put a div behind another but still show up above?

views:

answers:

+3 Q:

Put a div behind another but still show up above?

Ok this question may sound a bit convoluted, or at least esoteric, but I'll try my best to elucidate.

In my charting application I have a div which is used as a popup tool tip. This tooltip appears when you hover over a datapoint and gives you some information. I used z-index to make the tooltip render above the underlying chart div. However, the underlying chart has interactivity with mouse events, so is it somehow possible to have the underlying chart register mouse events even though the mouse is hovering over the tooltip?

+2 A:

You could capture the mouse event, taking note of the coordinates, then add these coordinates to the real position of the tooltip relative to the page. Then you can re-fire a fake MouseEvent using these coordinates, minus the coordinates of the underlying div element, at the underlying element.

Delan Azabani 2010-07-24 00:16:19

Now that's one hell-of-a sick explanation, but I cannot disagree! And actually I think that it's the only way available..

Tom 2010-07-24 00:20:45

I didn't think it was possible to fake a click event on specific page coordinates. Am I mistaken?

patrick dw 2010-07-24 00:23:57

@patrick, http://www.howtocreate.co.uk/tutorials/javascript/domevents

Delan Azabani 2010-07-24 00:25:22

Delan - Thanks for the link, but it appears to suggest that it is not supported in IE. Also saw this SO post that seems to suggest that it is not supported cross-browser. http://stackoverflow.com/questions/2845178/triggering-a-javascript-click-event-at-specific-coordinates

patrick dw 2010-07-24 00:31:07

Hmm I'll try this out. I do not need ie compatibility since the application is for a limited audience. I use jQuery framework, so I can just do event.pageX/event.pageY instead of having to figure out absolute coordinates manually.

Razor Storm 2010-07-24 00:33:05

+2 A:

While I agree with the answer regarding capturing the mouse events, I think there is a workaround. Simply position the tooltip div a few pixels off of the mouse cursor. That way it never appears underneath the mouse cursor and it would not be clickable.

Aaron D 2010-07-24 00:37:48

Oh, the tooltip doesn't appear in a location relative to the mouse cursor, but instead appears relative to the datapoint being selected. This is because in some data sets theres huge amounts of data, and it's more clear this way as to which point is being selected.Good suggestion though.

Razor Storm 2010-07-24 00:39:41

I like this solution better.. Though not nearly as cool, it is MUCH simpler to implement. Using the mouseOver event of the tooltip, just bump it either a) left/right the width of the of the box, b) up/down the height of the tooltip. The only problem I see here is if the user wants to copy the tooltip text :)

abelito 2010-07-24 00:42:27

+1 A:

I do not know if this is practical or not in your situation, but you could append the tooltip as a child element to the data point. That way it is still part of the chart.

qw3n 2010-07-24 01:53:29

That's actually a decently simple and elegant solution. I love it the best out of these, but the problem is that all data points are simply drawn onto a canvas tag. However, I can probably just append the tooltip to the div containing the canvas tag (the div is what fires the mouse events anyway), and then use absolute positioning.

Razor Storm 2010-07-26 16:30:59

Actually, on browsers that support css3, pointer-events is the simplest solution. :)

Razor Storm 2010-08-12 18:26:56

ansaurus

tags:

views:

answers:

Put a div behind another but still show up above?

related questions