Setup
Place the "Cursor Position" element anywhere on your page. It is an invisible utility element.
The element automatically begins tracking as soon as it is initialized.
Accessing Data
You can reference the mouse coordinates anywhere in your application (Text elements, Workflows, or Conditionals) by using the following exposed states:
X (Number): The current horizontal distance (in pixels) of the cursor from the left edge of the browser window.
Y (Number): The current vertical distance (in pixels) of the cursor from the top edge of the browser window.
Common Use Cases
Dynamic UI: Make an image or floating group follow the cursor by setting its X/Y positions to the tracker's states.
Custom Tooltips: Show a group at the cursor's location when hovering over a specific icon.
Analytics: Record where users are clicking or hovering during a specific workflow.
Demo Editor URL:
https://bubble.io/page?id=hks-demos&test_plugin=1775548271061x586566964804583400_current&tab=Design&name=cursor_position_detector&type=page&elements=cmMnh1Demo Page URL:
https://hks-demos.bubbleapps.io/version-test/cursor_position_detector