Here is a quick demo:
follow cursor.rp (53.8 KB)
The key to this is using the page event called Page Mouse Move and the built-in variable, “Cursor”. The page events are accessible in the INTERACTIONS pane when no widgets are selected. Using this, any time the mouse cursor is moved, it will move the “card” widget to [[Cursor.x +20]], [[Cursor.y +20]] --thus following the cursor movement. In Axure, the double square brackets are used to indicate a variable value, and the “.x” extension refers to the x-position value, so [[Cursor.x +20]] evaluates to the x-position location of the cursor plus 20 pixels. The 20 pixels merely provides an offset or margin between the left edge of the cursor in the x-dimension and top edge of the cursor in the y-dimension.
Likewise, the Click or Tap event of the SHOW CARD button moves “card” to the cursor location and then shows it. I could have instead used the Shown event of “card” to move “This” to the cursor location–and this would then work no matter how “card” was shown, and not only when the SHOW CARD button is clicked. (But it doesn’t look as good when a Fade option is used to show “card”.)
You can find all sorts of great variables, functions and widget properties to use by clicking “Insert Variable or Function…” in the Edit Value dialog. You can learn more about these here: