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