Tooltips in Repeater

#1

Hello all, :slightly_smiling_face:
I have a question regarding tooltips in repeater. I have created a repeater where I want the columns in each row to show different tooltips.

Any idea how to implement this?
(I created a tooltip component, does it possibly work easier with this but how can I change the text in the repeater per column?)

#2

This might depend on what kind of text is shown in your tooltip widget and how it differs.

  • Would the tooltip text only change per column?
    • In other words, would it be the same for Row 1 Column A and Row 2 Column A?
    • For example, if your repeater has 3 columns and 5 rows, do you only have 3 different tooltips, or do you have 15 different tooltips?
  • Would it need to change dynamically based on the content of a cell–or some other value?
    • For example, if cell 1A contains “cat” the tooltip might read, “Enter the name of your cat” ; but if cell 1A contains “dog” the tooltip would read, “Enter the name of your dog”

If you only have one tooltip per column (e.g., 3 instead of 15) it might be easiest to set the text value directly via a “column widget” --by which I mean either a widget representing column A, a group or dynamic panel of all widgets within the “column A area”, or a hotspot over the “column A area”, etc. …Just depends on how complicated your columns are.

  • For example, let’s say column A has three widgets grouped together. That group’s Hovered event could have these actions:
    • Set Text of MyTooltip to “Enter your pet’s name, up to 15 letters”
    • Move MyTooltip to [[Cursor.x]], [Cursor.y]]
    • Show MyTooltip, bring to front
  • …and Column B has just one widget with
    • Set Text of MyTooltip to “Select a breed”
    • Move MyTooltip to [[Cursor.x]], [Cursor.y]]
    • Show MyTooltip, bring to front

Another approach would be to create a dynamic panel in or of your tooltip widget with one state per column. Change the text in each state to go with each column, and have each column widget call a Set Panel State action with “show if hidden” option.

If the content of your tooltip needs to be more complex and/or dynamic, you can refer to strings and substrings, either from the repeater dataset or current text or status of widgets in the repeater (or elsewhere)

  • For example, Set Text of MyTooltip to “Enter a price for [[Item.ColumnA]]”

If you need to tailor the text per cell (column as well as row) you could add an additional column to store the tooltip text per cell, something like,
ColumnA | TooltipA | ColumnB | TooltipB
…then the Hovered or Mouse Entered event of the “column widget” could dynamically set the text, e.g., Set Text of MyTooltip to [[Item.TooltipA]] ; Show MyTooltip ...etc

Depending on the structure of your repeater, consider if your tooltip widget should be contained inside the repeater or outside the repeater. If inside the repeater, the tooltip might be clipped or obscured unless the repeater is set to “Fit to content in HTML” --but with this option the repeater might grow too large–for instance it might overflow the window width and still get clipped or require horizontal scrolling, etc. If the tooltip is outside the repeater it will probably work and look better. You can move it based on cursor location or the cell/column location–but if the latter, be sure to add in the repeater’s location as well as the row height.