Display text tooltip on hover

Ask us anything How do I?
1

Hello!

I’ve been dabbling with WeWeb for my new website. It has a bunch of semi-complex functionality, and WeWeb has been working so well for me! One of the things I want to do is show a text tool tip on hover over an image element (eg hover over my picture to display my name). Is this possible currently? I’ve attached an image for reference. I hovered over the pencil and got this tooltip.

Screenshot 2022-04-14 at 16.36.40
Screenshot 2022-04-14 at 16.36.401010×164 28.2 KB

TIA!

2

Hi @pranavpathak.91 :wave:

Yes, you could:

  • design a tooltip message,
  • bind its display to a boolean variable that has the default value “false”, and
  • create workflows that change that variable value on mouse enter and on mouse leave

Screenshot 2022-04-15 at 11.05.37
Screenshot 2022-04-15 at 11.05.371604×1120 59.6 KB

Does that make sense?

3

And success! Thank you!

4

Yey! Well done @pranavpathak.91 :raised_hands: :grinning:

5

Just to add more info for those who still don’t know how to close & open the tool tip.

You need to add “!” on the formula to have open & close functionality

See the screenshot below

Screen Shot 2022-08-05 at 10.32.31 AM
Screen Shot 2022-08-05 at 10.32.31 AM941×745 40.6 KB

6

This thread is great and helpful! I found that binding the variable to the tooltip’s opacity works nicely too - you get a smoother reveal and hide, if that’s something you are interested in

7

What is the purpose of the formula and exclamation point? Cant we just have two workflows like this?

  1. On Mouse Enter → Change variable to True
  2. On Mouse Leave → Change variable to False
8

Yes you can. You could also reset the variable on mouse leave (assuming it’s default is false).