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.

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

Bit rough and ready but might help your journey.


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.