Text on hover doesn't change on mobile

Hey everyone this is my first time posting on the bubble forum thanks for having me.

I’ve been working with my apps conditionals and they work just fine on desktop but when I try to open up the preview in mobile on my phone the text does not change. I made another app with the same type of text on hover conditionals and the same thing happens where it works just fine on desktop but does not respond the same on mobile.

https://www.loom.com/share/492001af07cf4fb6b0cedeb36940f78e

Are you referring specifically to the ‘when this item is hovered’ conditional, or all conditionals?

‘Hover’ means when the mouse pointer is ‘hovered’ over the element. Mobile devices don’t have mouse pointers, so elements can’t be hovered (hover behaviour doesn’t exist on touch screen devices), - so ‘when hovered’ conditionals won’t work on mobile devices (only devices with mouse pointers).

It’s something you need to take into account when designing UX/UI for responsive apps.

Thanks Adam!

I was referring specifically to the “when text is hovered” conditional.

Alrighty well since this option doesn’t work with mobile is there another way I can achieve the desired effect to work with mobile? Possible plug-in?

What exactly are you trying to achieve?

Revealing the price when the button is clicked?

You could add a double click action (using a custom state) to the button - so on first click the text changes to reveal the price, then on second click it does whatever action you want it to do.

The only issue with that is users might not realise they need to click twice to trigger the action, so it can mess with the UX unless it’s very clear.

Another option is to show a new element (such as a groupfocus) when the button is clicked the first time, showing the price, plus another button to trigger the main action - that makes it clearer to the user that they can click the button to find out more/trigger the main action etc.

Or just show another button alongside the price in the original element, so they know they can click again to find out more etc.

Another option is just to ignore the ‘hover’ action entirely on mobile devices and navigate directly to the details page when the button is clicked. You can leave the hover conditional on, so it will work when there’s a mouse, but for touchscreens clicking the button will simply trigger the desired action.

Or, you could try using the ‘when pressed’ conditional as well as ‘when hovered’ - this will trigger when the element is touched and held down, then the main button action will trigger when it’s released. But again, most users won’t know or expect that to happen, so will probably just click/tap the screen and will only see the ‘when pressed’ conditional behaviour (the price) for a brief moment before the main action is run.

Yes revealing the price upon hover was the main goal but I figured I might have to change the conditional from hover to click/pressed. Thanks for the input Adam. I’m going to try what you mentioned. Will update soon.