# Hover button, box will show

**URL:** <https://forum.wixstudio.com/t/hover-button-box-will-show/21865>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [May 18, 2020, 1:37am UTC](https://forum.wixstudio.com/t/hover-button-box-will-show/21865 "2020-05-18T01:37:45Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![spmjkamenor](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/spmjkamenor/32/19174_2.png) [@spmjkamenor](https://forum.wixstudio.com/u/spmjkamenor)\
**Post date:** [May 18, 2020, 1:37am UTC](https://forum.wixstudio.com/t/hover-button-box-will-show/21865/1 "2020-05-18T01:37:45Z")

</div>

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. 😊

 ![](https://us1.discourse-cdn.com/wix/original/3X/1/c/1c2959a432d82f7b42f81690ccc0c85db67d9be3.jpeg)

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [May 18, 2020, 2:54am UTC](https://forum.wixstudio.com/t/hover-button-box-will-show/21865/2 "2020-05-18T02:54:13Z")

</div>

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](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](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://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-writing-code-that-only-runs-on-mobile-devices)  
[https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only](https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only)

---

<div class="post-metadata">

**Author:** ![spmjkamenor](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/spmjkamenor/32/19174_2.png) [@spmjkamenor](https://forum.wixstudio.com/u/spmjkamenor)\
**Post date:** [May 18, 2020, 3:29am UTC](https://forum.wixstudio.com/t/hover-button-box-will-show/21865/3 "2020-05-18T03:29:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![spmjkamenor](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/spmjkamenor/32/19174_2.png) [@spmjkamenor](https://forum.wixstudio.com/u/spmjkamenor)\
**Post date:** [May 18, 2020, 10:47am UTC](https://forum.wixstudio.com/t/hover-button-box-will-show/21865/4 "2020-05-18T10:47:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [May 18, 2020, 11:06am UTC](https://forum.wixstudio.com/t/hover-button-box-will-show/21865/5 "2020-05-18T11:06:33Z")

</div>

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](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](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://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](https://support.totallycodable.com/en/article/create-animation-on-one-repeater-item-at-a-time-using-wix-code)

---

<div class="post-metadata">

**Author:** ![spmjkamenor](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/spmjkamenor/32/19174_2.png) [@spmjkamenor](https://forum.wixstudio.com/u/spmjkamenor)\
**Post date:** [May 19, 2020, 6:05am UTC](https://forum.wixstudio.com/t/hover-button-box-will-show/21865/6 "2020-05-19T06:05:39Z")

</div>

Thank you very much. 😄😄

---

<div class="post-metadata">

**Author:** ![spmjkamenor](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/spmjkamenor/32/19174_2.png) [@spmjkamenor](https://forum.wixstudio.com/u/spmjkamenor)\
**Post date:** [May 21, 2020, 3:57am UTC](https://forum.wixstudio.com/t/hover-button-box-will-show/21865/7 "2020-05-21T03:57:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [May 21, 2020, 5:58am UTC](https://forum.wixstudio.com/t/hover-button-box-will-show/21865/8 "2020-05-21T05:58:00Z")

</div>

@spmjkamenor Make sure you are using the [Repeater Item scope selector](https://www.wix.com/corvid/reference/$w.Repeater.html#repeated-item-scope) **$item** in your [onItemReady()](https://www.wix.com/corvid/reference/$w.Repeater.html#onItemReady) function so that each Repeater Item is handled separately.
