Anvil Community Forum

Adding hover and focus effects

What’s the trick to adding additional effects to arbitrary components like labels, panels, images etc. I like to add hover and focus effects to aid user interaction

Here’s one way to do hover effects (see link below).

Not tried this, but if you were to add a role to, say, a text box like so (must be done in code for now) :

self.mytextbox.role = "testhover"

This adds a class of “anvil-role-testhover” to the component **.
You can then create some CSS and attach it to the custom form to add the tool tips to that class.

Bit of experimentation required,

** (edit) - not strictly true - it adds the class to the encapsulating DIV, so your CSS may have to take that into account. Worth inspecting the elements in the browser to get it right.

https://anvil.works/forum/t/more-events-trapped/129/4?u=david.wylie

Ok, here’s a demo project to show it working :

https://anvil.works/ide#clone:W4E5E5T5MKJJAJCL=76ZVIYNURBRKKOTM5KFFGZTA

Bit rough and ready but might help your journey.

2 Likes

This makes sense. Thanks David!

NB: The Role Editor is now live, which means you can now create visual roles for components and use them in the designer! (This makes previewing them a lot easier while you’re editing the CSS) Hit Themes->Assets, and choose “Configure Roles” from the drop-down.

4 Likes