I’m trying to show a tooltip on a mousemove event. My problem is that when I place the top and left of the tooltip div using event.pageX and event.pageY, it ends up below and to the left of the mouse pointer. How should I adjust the top & left?
I don know the answer, and I am sure someone will, however of note is the menu bar plugin has this option for the dropdown. You may be able to find how it is done in the code.
1 Like
I couldn’t see where the coordinates are set.
When defining a menu with the drop down there is a field dropdown-position containing one of the following values;
Optional position for the dropdown (can be left , above , aboveleft , aboveright , right , belowleft , belowright or below )
I will look a little more today
I think the difference is that it places itself next to another element, thus using the same coordinates system, whereas I’m using the mouse coordinates
Are you creating the tooltip in JavaScript, or are you using $eventcatcher?
What is the desired position of the tooltip? Centered on the pointer? Somehow relative to the element you are attaching the mousemove event to?
I Just remembered that these positions used by the menus are also those available to the reveal widget.
- Thus I find these positions in use here $:/plugins/tiddlywiki/menubar/menu, near the bottom.
- This is not what the OT is about, instead asking for hover mousemove event, typically what tooltips are. These and their positions are discussed here CSS Tooltip and can be done in CSS only.
I will raise a related question action on mouseover.
Are you talking about a javascript function or wikitext?
Creating it in JS. I need it placed at the point of the mouse.
javascript. adding more characters so the reply is accepted…
Offset the position of the div from event.pageX and event.pageY values where the offset is based on the width and height of the tooltip div.
Alternatively, you might be able to use CSS to adjust the position of the div, for example:
transform: translate(-50%, -50%);