Mouse position in pageDIV to variables

georgeb
Community Member Posts: 43
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?
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?
Comments
-
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)
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.
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 last message in this thread might help you:
https://community.trivantis.com/forums/topic/tooltips-in-lectora/ -
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.
Categories
- 35.8K All Categories
- 109 ✫ Announcements
- 33.1K Lectora®
- 31.1K Lectora Discussions
- 28.9K Lectora Desktop
- 2K Lectora Online
- 2K Lectora Feature Requests
- 71 Lectora User Groups
- 36 Lectora Accessibility User Group (LAUG)
- 22 ELB Learning Content
- 22 ELB Learning Content Discussions
- 321 CenarioVR®
- 188 CenarioVR Discussions
- 133 CenarioVR Feature Requests
- 41 Rockstar Learning Platform®
- 38 Rockstar Learning Platform Discussions
- 108 CourseMill®
- 108 CourseMill Discussions
- 47 ReviewLink®
- 47 ReviewLink Discussions
- 7 The Training Arcade®
- 7 The Training Arcade Discussions
- 934 All Things eLearning
- 36 eLearning Development
- 546 Learning Management System (LMS) Integration
- 332 Web Accessibility
- 1.2K ♪ The Green Room
- 9 Additional Learning Products