Dynamic Position for a Mouseover Tooltip Display

#1

I’ve created a standard bar chart showing a bar for each month of a given year on the X axis. Each bar represents a $ value. However, I would like users to view a quick breakdown summary for each of that month. To achieve that I would like to create a ‘tooltip’ or ‘popup’ on mouseover for each of that bar.

Now the challenge I have is, how can I make that mouseover-tooltip or mouseover-popup dynamic? By dynamic, I mean, I want the breakdown summary displayed next to my cursor. Which means, when I move my cursor up and down WITHIN the bar on mouseover, the popup follows my cursor.

#2

Hi!
Actually, if I understood well, what you need is the Tooltip functionality that is embedded in Axure
Under “PROPERTIES” panel there is a field called TOOLTIP, can be used for whatever widget, you have just to put your text inside, this will behave as you asked for.
Unfortunately cannot be customized, if you need to do so.

Screenshot 2018-11-22 at 10.22.10.png280×501 20 KB

#3

Hi @ccgraphicdesigner, thanks for your reply. Sadly the info I would like to display in that ‘tooltip’ is more than a single line of words. I would like to show a small table of at least two columns and four rows, showing the breakdown of the $ value for that bar the cursor is hovering over.

#4

A short hint for a solution:

  1. You need to build a repeater with the data inside you want to show as hint and set him to “Hidden”.
  2. Then you need “OnMouseEnter”-Action on the widgets that should react on hovering over with the mouse.:
  • Add Filter on Your Repeater-Widget
  • Move Your Repeater-Widget to ([[LVAR1.x+???]],[[LVAR1.y+???]]) while LVAR1 = widgets with mouseover-hint
  • Show Your Repeater-Widget bring to front treat as flyout
#5

Thanks @urban!
Could you just clarify exactly where and how do I apply your second point?
"Move Your Repeater-Widget to ([[LVAR1.x+???]],[[LVAR1.y+???]]) while LVAR1 = widgets with mouseover-hint"
Is that a configuration for the Add Filter action? Or is that a totally separate action from the Case Editor?

#6

You are welcome. :slight_smile:

It is an action inside the case editor and looks like that:

image.png819×315 19.8 KB

and then:

image.png1080×629 52.9 KB

#7

Have you figured this out?
I am trying to do the same thing but didn’t get it. Do you mind share an example file?

Thanks a million!

Moving widgets that follows cursor
closed #8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.