Group focus are very useful when building an app on Bubble.
They can be used to display important information or provide user with a context menu that can be used for specific actions.
However, Group Focus have some flaws, one of them being the fact that they can only be shown via a workflow.
So, if for some reasons you want a Group Focus to appear when an element is hovered, chances are you did not find a way to do this, because it's not as straightforward as it looks.
Well don't worry, I'm going to show you step by step how can make a Group Focus appear when a user hovers an element.
It can be very useful for Tooltips or for a Navigation Header for example.
Related Tutorials : Bubble.io Group Focus : All you need to know (2024)
Related Tutorials : Group focus in a Repeating in Bubble.io - How to do it ? (2024)
Step 1 - Build our interface
First and foremost, you'll need to build your actual Group Focus.
As an example, I'll be making a Tooltip, but you can use this method for pretty much any use case you like.
As you can see below, I've created a very simple Tooltip with just a Text element inside a Group Focus. This group focus is attached to an information Icon that comes from the plugin Google Material Icon.
All right, now that this is set, we can start with the technical part.
Adding a custom state
As you remember, we can show a Group Focus only with a workflow, and we cannot trigger a workflow with a conditional.
So, we need a way of "tracking" and "registering" when our element is hovered or not.
To do this, we'll use a combination of a "Do when condition is true" workflow and a Custom State.
Let's start by creating a Custom state.
I'm going to attach it to my Information icon, but you can attach it wherever you want on your page
As you can see, I've set this Custom State's type to "Yes/no", and did not set a default value. You can name it however you like.
Now we need to add two workflows to update this custom state accordingly.
- The first one will set the custom state's value to "No" when the Icon is not hovered
- The second will set the custom state's to "Yes" when the icon is hovered
To do this, we'll use two "Do when a condition is true" workflows :
The first workflow we'll add will have the following condition : YOURELEMENT isn't hovered and YOURELEMENT's Custom State is yes
Said more clearly, we want this workflow to set the custom state's value to "No" when our icon is not hovered.
Also, make sure to set this workflow to Run Every Time (with the "Run this" property)
And now you can duplicate this workflow and set the second workflow's value to the opposite of the first one.
You should end up with something like this :
Once again, don't forget to set this workflow to "Run Every Time".
Step 3 - Adding the workflows to show and hide the Group Focus
Now that we have a way of tracking and registering when our element is hovered, we need to create the actual logic that will show and hide our Group Focus.
To do this, we'll use two more "Do when a condition is true" workflows that will be triggered according to our Custom State's value.
Here's how it looks :
This first workflow gets triggered when our Custom State's value becomes "No", which is when our element is not hovered. Therefore, we need to add a "Hide an element" action to hide our Group Focus.
Once again, do not forget to set this workflow to "Run Every Time"
And this second workflow gets triggered when our custom state's value becomes "Yes", which means our element is hovered. Therefore, we'll add a "Show an element" action to show our Group Focus.
Once again, do not forget to set this workflow to "Run Every Time"
And there you go !
You now know how to show or hide a group focus on hover.
Remember, I took a simple tooltip to illustrate this tutorial, but you can use this technic for pretty much any use case, so be creative !
