Unique tooltip for each repeater item

Ask the community
, , ,
1

Question:
Is there a way to make a simple text tooltip with code?
A tooltip that is related to each of repeater items.

[Wix Studio Editor]

As I can see, a hidden element is also would be a part of a repeater and will mess up with the layout. I have a grid of items (100x100px) with icon and small line of text. I want a tooltip with more text shown on mouse hover. Each item in a grid has its own icon and text and should have its own tooltip text. So I assume it could be done only with code.

I’m new to WIX and coding so may be there is an example which I can modify?

2

I’m not entirely sure but I think natively Wix only supports tooltips for image elements

You could set those programmatically, if a picture suits your needs

$w('#repeater').onItemReady(($item, itenData) => {
    $item('#img').tooltip = itemData.tooltip
})

You could also use an iFrame but you’ll need to build the HTML within on your own

1 Like
3

Thanks for a reply.
I saw this solution for an image but the image is too small and now quite usable for this.

I can go with html and iFrame. How can I target specific repeater item with a specified tooltip content?

4

I’ve shown it above, when a repeater item triggers its onItemReady function, the $item argument serves as the $w for the context of that specific item, and itemData is the data populating it

You can interact with the iFrame and send it the relevant data as needed

1 Like
5

Already added the collection. Connected the dataset to the repeater. Connected the #img also with the tooltip field.
Items with data collection are showing ok, but the tooltip never shows up.
Tryed also with code and iFrame. No result.

6

Have you linked the tooltip using the Editor’s UI or code?
Either should work but let’s try to narrow it down to why it doesn’t

7

Tried both. Starting with UI and nothing. Then with a code.

8

I see, as for the UI, I can’t be sure of what’s not working, if you could provide a screenshot of the connection perhaps I could see something not quite right

Same with the code, paste it here, and if you’re getting errors, paste them too