Hi,
I am trying to build a hover card that follows the cursor in Axure when shown .
I have browsed the forum and watched many videos, but am still stuck. Can you please show me how to do this, or point me in the right direction?
The only discussion I found relevant in the forum is this: Dynamic Position for a Mouseover Tooltip Display
But I found it hard to follow (I am too newbie!) and could use some help for sure. Thanks in advance!
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:
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.