# How can I make a tooltip?

**URL:** <https://community.weweb.io/t/how-can-i-make-a-tooltip/18418>\
**Category:** Ask us anything\
**Created:** [May 26, 2025, 5:28am UTC](https://community.weweb.io/t/how-can-i-make-a-tooltip/18418 "2025-05-26T05:28:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gaby\_Padilla](https://avatars.discourse-cdn.com/v4/letter/g/bc8723/32.png) [@Gaby\_Padilla](https://community.weweb.io/u/Gaby_Padilla)\
**Post date:** [May 26, 2025, 5:28am UTC](https://community.weweb.io/t/how-can-i-make-a-tooltip/18418/1 "2025-05-26T05:28:35Z")

</div>

I’ve created the placeholder message.  
I’ve set the display as none with an absolute position.

For my icon, I’ve added a state on hover. But how can I relate the text with the icon I have?

Thanks

---

<div class="post-metadata">

**Author:** ![Batik\_Okazov](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/batik_okazov/32/12688_2.png) [@Batik\_Okazov](https://community.weweb.io/u/Batik_Okazov)\
**Post date:** [May 26, 2025, 7:40am UTC](https://community.weweb.io/t/how-can-i-make-a-tooltip/18418/2 "2025-05-26T07:40:48Z")

</div>

Hi Gaby,

I made it with “dropdown” standard element.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/379808a911158e44cb0cc70e94e62adfa515a4cd.png)

![2025-05-2610-26-52-ezgif.com-video-to-webp-converter](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e47e23b55b7dc0ee71f931545e9d2497cf7a0af4.webp)

1. I placed an icon inside trigger.  

2. Bound dropdown conditional rendering to a var:  

3. Created two workflows inside the icon on “mouse enter” and “mouse leave”.  

3.1. On mouse enter:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/00da09f89cfd3df779c453b250c005788a0ca94e.png)

I added a time dealy to imitate debounce, cause I don’t want toolptip to pop-up immediately.

3.2. On mouse leave:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/bd43e2ead5307275da809b62dc04e674a24a6cd6.png)

---

<div class="post-metadata">

**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\
**Post date:** [May 26, 2025, 2:52pm UTC](https://community.weweb.io/t/how-can-i-make-a-tooltip/18418/3 "2025-05-26T14:52:05Z")

</div>

Nice one Batik!

Thank you for the in depth tutorial 🙏

---

<div class="post-metadata">

**Author:** ![Gaby\_Padilla](https://avatars.discourse-cdn.com/v4/letter/g/bc8723/32.png) [@Gaby\_Padilla](https://community.weweb.io/u/Gaby_Padilla)\
**Post date:** [May 28, 2025, 3:49am UTC](https://community.weweb.io/t/how-can-i-make-a-tooltip/18418/4 "2025-05-28T03:49:49Z")

</div>

Thank you very much Batik for taking the time of making the step by step of what I need to do.

It worked!!!

---

<div class="post-metadata">

**Author:** ![Yaj](https://avatars.discourse-cdn.com/v4/letter/y/eb8c5e/32.png) [@Yaj](https://community.weweb.io/u/Yaj)\
**Post date:** [May 28, 2025, 4:28am UTC](https://community.weweb.io/t/how-can-i-make-a-tooltip/18418/5 "2025-05-28T04:28:27Z")

</div>

A simple one you can also do if you don’t want to use a dropdown is create an icon ( i used the exact same one thats shown here ) and then add an html attribute of title and then you’re tooltip text.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2ab6bf36441dc0c69b8e3e72a2ea80348b4c8d94.png)

---

<div class="post-metadata">

**Author:** ![Gaby\_Padilla](https://avatars.discourse-cdn.com/v4/letter/g/bc8723/32.png) [@Gaby\_Padilla](https://community.weweb.io/u/Gaby_Padilla)\
**Post date:** [May 28, 2025, 5:21am UTC](https://community.weweb.io/t/how-can-i-make-a-tooltip/18418/6 "2025-05-28T05:21:16Z")

</div>

Hi Yaj, this is way easier.

Thanks!!!