Hover over text to see button

App Building
1

Hello Retool Community,

in my app I would like to show a button only when hovering over a text component. I want to do that with CSS, but unfortunately with my code it doesn't work.

My codes looks like this:

._retool-button1 button {
visibility: hidden;
}

._retool-text1:hover + ._retool-button1 button {
visibility: visible;
}

Can somebody help me here?

Thanks for your time.

Best regards,
Lena

2

Welcome to the forum!

Can you share more information. Is the button clickable when hovering over the text? Screenshot?

3

Hi ScottR,

thanks for your fast answer.

In the attached screenshot you can see that I have 3 different text components with each showing a different attribute. I want them to be copied to the clipboard by clicking on a button, so I created 3 different buttons with event handlers to copy the respective value.

But I don't want these buttons to be visible all the time, they should be only visible when hovering over the respective text component (this doesn't work) and when hovering over the button itself (this already works).

image
image920×222 24.9 KB

My template here is Google Maps as you can see in this screenshot:

image
image798×586 31.6 KB

Thanks again

4

Yep looks like there is no event handler for hover to trigger or set hidden to false for the button... you may want to think of a different design for what you're trying to accomplish? Perhaps a dropdown when selected, a certain button will appear?

5

So you think that also with CSS it's not possible to achieve this?

But yes, if that's not possible, we'll have to do it like you mentioned e.g. with a dropdown.

6

Using CSS could be tricky as the classes could change over time.... so yes I would use a drop down