# Create mouse hover info popup

**URL:** <https://community.weweb.io/t/create-mouse-hover-info-popup/7706>\
**Category:** How do I?\
**Tags:** design\
**Created:** [March 21, 2024, 10:51pm UTC](https://community.weweb.io/t/create-mouse-hover-info-popup/7706 "2024-03-21T22:51:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdpentest](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@mdpentest](https://community.weweb.io/u/mdpentest)\
**Post date:** [March 21, 2024, 10:51pm UTC](https://community.weweb.io/t/create-mouse-hover-info-popup/7706/1 "2024-03-21T22:51:49Z")

</div>

I am attempting to create little info popups when a user mouses over a column header on my page. Is there a widget that I could leverage to do something like this? I’ve poked through the UI for some time and haven’t found much. Similar to when a site has a little info “i” on a page you can hover over to define something. Any help is appreciated.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [March 26, 2024, 2:24pm UTC](https://community.weweb.io/t/create-mouse-hover-info-popup/7706/2 "2024-03-26T14:24:52Z")

</div>

Hi @mdpentest 👋

You could add an icon with the little i for info if you’d like:

 ![CleanShot 2024-03-26 at 15.17.55@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/43f86c9789397116e605574ede2628f271b381fa.png)

When the user hovers over it, you could display a tooltip:

 ![CleanShot 2024-03-26 at 15.24.25@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/fca0f24aa34c7740ab446b7000cd17f547aedee1.png)

Does that help?

---

<div class="post-metadata">

**Author:** ![mdpentest](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@mdpentest](https://community.weweb.io/u/mdpentest)\
**Post date:** [April 4, 2024, 6:17pm UTC](https://community.weweb.io/t/create-mouse-hover-info-popup/7706/3 "2024-04-04T18:17:51Z")

</div>

This is perfect. What would the workflow logic look like?  
“On mouse enter” \> set view variable to “True”  
“On mouse leave” \> set view variable to “False”?

Or what is the recommended approach you have pictured here?

Thanks for your help

---

<div class="post-metadata">

**Author:** ![mdpentest](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@mdpentest](https://community.weweb.io/u/mdpentest)\
**Post date:** [April 4, 2024, 6:34pm UTC](https://community.weweb.io/t/create-mouse-hover-info-popup/7706/4 "2024-04-04T18:34:41Z")

</div>

I am also trying to get the text element to float above the rest of the page, so it is simply a bubble that appears on the top level, and then disappears without changing any of the page layout visually

---

<div class="post-metadata">

**Author:** ![BenoitG](https://avatars.discourse-cdn.com/v4/letter/b/3da27b/32.png) [@BenoitG](https://community.weweb.io/u/BenoitG)\
**Post date:** [February 20, 2025, 8:39am UTC](https://community.weweb.io/t/create-mouse-hover-info-popup/7706/5 "2025-02-20T08:39:17Z")

</div>

Hi ! Did you manage the second part ? 😀

---

<div class="post-metadata">

**Author:** ![Dominic](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dominic/32/5645_2.png) [@Dominic](https://community.weweb.io/u/Dominic)\
**Post date:** [February 20, 2025, 10:57am UTC](https://community.weweb.io/t/create-mouse-hover-info-popup/7706/6 "2025-02-20T10:57:57Z")

</div>

Hi!. Just set the position of the div to fixed and you can position it relative to the page.