Cursor and tooltip position over repeater

[bermanatalie]

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

[Jane_Axure]

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)

[pdcdec]

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)

[bermanatalie]

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

[Zuvala]

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

Repeater Widget resize depending on text length

Anyone have an answer or better solution for this?

Repeater and image auto-sizing

Hi, I'm trying to create a repeater that display images with a varying size / aspect ratio. So far, all of the images are size according to the image object I have defined in the repeater, which looks ugly for many pictures that are stretched or compressed according to the aspect ration of the image object. So I was wondering if there's any chance to have an auto-size image in the repeater (similar to the option 'Auto size image' if I import a single image into an image object). Thanks in a…

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?

[bermanatalie]

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

[system]

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