Mouse position in pageDIV to variables

georgeb

Hi, I'm working on a title where students need to be able to click certain words.

The idea is to have a 'tooltip' at the clicked word that gives more information. The tooltip is a text block with CSS styling. (speech-bubble style)

To prevent making dozens of identical speech-bubbles wirth identical texts, I want to create them in groups on title level and use alsways on top to show them above the course content.

The issue I can't solve: How can I read out the mouse cursor position? I found a trick to move the element with javascript, but the code I got use the position of the cursor inside the browser window, not inside the pageDIV, making the tooltip move to the wrong coordinates. Also the code I found only worked if I put it directly via a OnMouseClickRunJavascript, and not via an Action Group on title level.

Hopefully someone can help me out?

carlfink

The idea is to have a ‘tooltip’ at the clicked word that gives more information. The tooltip is a text block with CSS styling. (speech-bubble style)

To prevent making dozens of identical speech-bubbles wirth identical texts, I want to create them in groups on title level and use alsways on top to show them above the course content.

Why not create a single popup and change the text in it using the Change Contents action? If you move it using JavaScript, I would expect the box-position-setting and mouse-position-getting functions to use the same coordinate system, so that wouldn't be a problem. (I haven't tested this and I have done only the most cursory JS work, so don't assume I'm right.) You'd have to watch for overlap-edge-of-window (or -of-viewport) issues.

The last message in this thread might help you:
https://community.trivantis.com/forums/topic/tooltips-in-lectora/

georgeb

Hi, thanks for your reply, but that example doesn't work. (Missing files and after downloading them I still didn't see it working)

 

Using 1 or more objects/groups to move is not an issue, the only issue I have is getting the right coordinates to use to move either 1 object that gets changed content text or whatever group I want to move to those coordinates.

timk

The only thing you'd have to do is to subtract the left position of the "#pageDIV" from the left position of the mouse.