Hover button, box will show

Ask the community
,
1

Hi everyone, how can I make a button that when I hover on it, a box will show with information like this in the picture.

Thanks in advance. :blush:

867×418 31.9 KB

2

Simply use onMouseIn on the required element and add the code to that event handler function.
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn

You can see more about it here.
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events

However, please note that the onMouse event handler function will not work on mobile devices, so you will need to use onClick for that instead and make use of the Wix Window API and the formFactor function.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only

3

Thanks a lot. I’ve been searching through out google for this. :sweat_smile:

4

Hi, what is i wanted to put it in a repeater connected to a database? Thanks in advance.

5

If you want to use it in a repeater then you will need to code it differently so that it works with each item and not all of the repeater.
https://www.wix.com/corvid/reference/$w.Repeater.html

You can see more in previous forum posts here.
https://www.wix.com/corvid/forum/community-discussion/adding-distinct-animations-to-each-item-in-a-repeater

Or on outside websites about it here.
https://www.vorbly.com/Vorbly-Code/WIX-REPEATER-ANIMATE-INDIVIDUAL-ITEMS
https://support.totallycodable.com/en/article/create-animation-on-one-repeater-item-at-a-time-using-wix-code

6

Thank you very much. :smile::smile:

7

Still haven’t figured it out. I tried putting onClick function on my repeater to show a collapsed box but whenever i click the button to show the box, it will expand on all Containers in my repeater.

How can I make it show separately per container.

Thank you.

8

@spmjkamenor Make sure you are using the Repeater Item scope selector $item in your onItemReady() function so that each Repeater Item is handled separately.