Cursor and tooltip position over repeater

Hello,
I am trying to build a compact table with a repeater.
Whenever the mouse cursor moves over table, OnMouseEnter cursor follows tooltip.

Compact table wth cursor.rp (183.6 KB)

I would greatly appreciate any help!
Natalie

Hi Natalie,

Rather than using Javascript hacks, I’d recommend first using a manual approach, especially if you would need to edit the prototype later on. To start, move the tooltip widget inside the repeater and then duplicate this widget 6 times so that there’s a tooltip widget for each column entry. OnMouseEnter, show the corresponding tooltip widget with “Treat as Flyout” while hiding the others. This should allow the tooltip to move/correspond to each repeater row.

The very last part is disabling “Fit to Content in HTML” for the repeater so that the repeater does not readjust its size when the tooltip widget is shown.

I’ve edited your file to demonstrate this, and I’ve also added a simple example file to show exactly how you could set this up from scratch.

RepeaterCustomTooltip.rp (48.9 KB)

Compact table wth cursor_EDIT.rp (201.1 KB)

1 Like

Here is a version using just 1 tooltip (out of the repeater) and reacting when ‘onMouseHover’.

onMouseHover has a ‘natural’ delay which, in the case of a tooltip, is not a bad thing I think.
It avoids the tooltip poping out when you just move quickly over the grid.

Hoping it can help…
Compact table wth cursor_EDIT2.rp (201.2 KB)

1 Like

Hi pdcdec,

This is such a great sample!

May I please ask you if you know how to make the tooltip text of any length always fit the tooltip box with constant 5px paddings all around?

tooltip_text:
Set Size of This to [[Target.width + 5]] x [[Target.height + 5]] anchor top left

Compact table wth cursor_EDIT3.rp (202.9 KB)

Thank you,
Natalie

Unfortunately this isn’t axures strong suit. The topic of dynamic text lengths has been discussed a few times:

You can calculate an approximate length based on the number of characters.
But this isn’t an exact solution.

How many rows do you have?

Hi Zuvala,
Thank you so much for a quick reply!
Right now, I am developing a template for a compact table (row width is 100px) and text is truncated. On hover user can read full text. The text can be as long as can be. I do not know how many rows I will have. If table is heavy, It will have a horizontal scroll. I am looking for universal solution for tooltip size.
I find on forum several examples of script:

  1. Set Size of (SOMETHING) to [[item.Name.length*5+25]] x height# anchor top left
  2. Set size of (SOMETHING) to height# x [[LVAR1.length/40*16]] anchor top left
  3. Set size of (SOMETHING) to width# x [[LVAR1.height]] anchor top left
  4. Set size of (SOMETHING) to [[Target.height * ( Target.text.length / 20 )]] anchor top left
  5. Set size of (SOMETHING) to [[LVAR1.length * 10]] x height# anchor top left
  6. Set size of (SOMETHING) to [[(Item.columnName.length/30).toFixed(0)*50]]

CONDITIONS SCRIPT:

  1. If [[text.length]] is greater than or equals to 30,
    Set size = [[text.length * 24]] (instead of 24, place in some other number.)

2.less then 5 letters
(If “[[Item.Name.length]]” is less than or equals “5”):
Set Size of (SOMETHING) to 64 x 20 anchor top left

5-8 letters
(If “[[Item.Name.length]]” is greater than “5” and “[[Item.Name.length]]” is less than or equals “8”):
Set Size of (SOMETHING) to 84 x 20 anchor top left

etc…

JS SCRIPT:
javascript:void($axure.setGlobalVariable(“NameFieldHeight”,$( “[data-label=Upgrade_Name] .text”).height()));

I lost in a way, what solution is best for tooltip. What I did:
Compact table wth cursor_EDIT3.rp (214.7 KB)

And it works properly, but maybe you suggest a formula that do the some thing, but short.

Thank you again!
Natalie

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