I really do not know what it is called but…
Could someone teach me how to make this in my website?
It is like a popup that shows up when you hover the mouse over (i) icon.
You can do it easily by creating a Box, add some elements inside it, position it next to where you want the box to show, open it’s properties panel, make sure the (Hidden on load) box is checked, select the element that you want the box to appear when you hover over it, add an onMouseIn( ) and onMouseOut( ) event handlers, then type in a few lines of code that show the box when you hover over the element, and hide it when you hover away from it.
That’s a lot of details at once, let’s split it so you can apply what I suggest easily.
1. Create a box:
Click on the ( + ) icon on the left bar to add some elements, select Box from the main menu, then select a box of your choice and design it as you want.
2. Add elements to the box:
For example a short description, use text elements.
3. Set the box to be hidden on load:
Select the box that you’ve created, and go to its Properties Panel , ( Developers Tools ) should be turned on in order to see it, on top of that box, make sure you check the box that says " Hidden on load ".
4. Edit the box identifier (ID):
On the same menu from the previous step, change the ID of the element to whatever you want, make it something relevant so we can use it on the next steps. For me, I’m going to name it ( #infoBox ).
5. Add the necessary events:
On the element that you want the box to be shown when you hover over it, select it, and go the Properties Panel , on the event menu, next to the onMouseIn and onMouseOut events, click on the little ( + ) sign next to each of them and hit enter.
6. Edit the element identifier (ID):
On the same menu in the previous step, change the element ID to something relevant like we did in step 4 . I’m going to name it ( #info ).
7. Adding the onMouseIn code:
In this step and the next one, we’ll be using the code panel , (Page code not Site Code), now let’s add the code that will show the box:
export function info_mouseIn(event) {
//Add your code for this event here:
$w('#info').show("fade", {"duration": 300});
}
This will show the box when you hover over the element. And with with some cool animation 
You can thank me later.
8. Adding the onMouseOut code:
The following code will hide the box when you hover away from the element.
export function info_mouseOut(event) {
//Add your code for this event here:
$w('#info').hide("fade", {"duration": 300});
}
That’s it, easy 8 steps and you’re ready rock . Now you have a similar box like the one in the picture above.
Happy Coding!
Ahmad.
1 Like
That is one of the best posts I’ve ever seen here! I’m not a developer and it was still very easy to follow!!
@ella91012 Glad that you found it useful 
@ella91012 Sorry, but I have to disagree. You are developing, so you are a developer. 
Hey, this does sadly seem to be buggy right now
The hover in does not work, and the hover out only works when you hover
over the 0,0 coordinate of the box exactly (top left) instead of the full size
I have no compile errors or typos
Sometimes you get that when you hover so fast that you call the hide() function before the Promise of the show() is resolved.
To fix this, add a debounce timer and you’re ready to roll.