I have a modal that shows some information when you mouse over an item. Right now I have it loading in the bottom corner. I’d like to have the modal show up right next to the mouse cursor/pointer instead, is it possible to set the position relative to where the mouse is?
You can use the x and y properties of the mouseenter and mouseleave events.
-
create a variable to store the modal state
-
bind the modal settings to the data in the variable
-
add a workflow for
mouseenterand update the state of the modal
-
add a workflow for
mouseleaveand update thedisplayproperty of the modal variable
result:
5 Likes
Awesome, thank you!!
What about normal containers (not modals)?
Where do I put the x and y properties so that the container shows up at the cursor position?
use position fixed. if you use position absolute you need to calculate the coordinates relative to the parent element.
Oh good idea, I changed the container’s position to fixed.
How do I bind the x and y of the cursor position that I have to these 4? Top and left?
top → y
left → x
I am trying to store the cursor value in an object variable but everytime I “mouse enter”, it changes the variable to {} and not the actual value? Any idea why?
it’s better if you create a new object instead of using the event, also because there aremany more things in the event object. {x:event.x, y: event.y}
remember that top and bottom require a string like 42px, not only a number
@dorilama, my conclusion is that the coordinates are defined only on mouseenter. Is that correct? Any advice on how to get the coordinates to update in real time? I’d like to explore having the modal/tooltip float next to the cursor (similar to this CodePen) while within the element.
What I’ve attempted thus far is: adding a listener within the respective elements mouseenter workflow, as well as adding a function to record the real time x,y (similar to this Tutorial), and then returning an object like you’ve proposed with the returned x, y, plus the dynamic copy for the tooltip.
to track the mouse movement after the mouseenter event you need to add a listener for the mousemove event and get the updated coordinates.
you can add it with js actions in a workflow (probably using the onmount trigger) and in the handler trigger a global workflow with wwLib.ExecuteWorkflow that process your logic