onMouseIn/Out inside a repeater

Looking to rollover images in the repeater to show a popup box with a bio. They all have the same name element name. Is there a way to do this?

Hi there! I do something similar on my site. There are many resources for this in the forum, here are a few posts I found that will be helpful to you.
https://www.wix.com/corvid/forum/community-discussion/no-unique-ids-for-buttons-in-one-repeater
https://www.wix.com/corvid/forum/community-discussion/hovers-on-repeater-are-slow-sticky?origin=member_comments_page

This API will also be a good reference. Basically, you’ll need to use $item instead of $w for the elements. That way the event will be limited to each individual item in the database/repeater, instead of to the specific element ID.

Something like this:

$w.onReady(function () {
    $w("#yourHoverElement").onMouseIn((event) => {
 let $item = $w.at(event.context);
        $item("#yourBox").show();
    });
    $w("#yourHoverElement").onMouseOut((event) => {
 let $item = $w.at(event.context);
        $item("#yourBox").hide();
    });
})

Thanks, I understand the this a bit better, still not getting it to work. I used the code from one of the links above. I also tried the code pasted above changing the element names to match mine. Do you see anything in the screenshot that I might be doing wrong?

The code looks functional, but from the screenshot it looks like the box is not attached to the repeater, which would cause the code to not work.
“$item” only works with elements within a repeater.

OK thanks! I am having a hard time getting the box with text to stick to the repeater. It won’t attach.