Hey!
I am sure many of the experienced Bubbler’s out there already know this tip, this is more for the new Bubble Developers out there who just want to push their UI / UX to the next level.
This is how you can make nice custom tooltips using only Bubble!
End product:
Let’s get learning!
In this tip you will learn:
- Custom conditional workflows
- GroupFocus
- Element Animations
To get started, you need the element in which you will be wanting to be a tooltip for. For this case, I will be using the Icon element, and changing it to a pencil. The pencil will act as an “edit” button, but I want my users to be able to clearly tell what it does and thus, I need a tooltip.
Here is what I have:
Okay, great! Now, the tooltip itself will be made of a Group Focus. You can see the manual of Group Focus’ here.
I am going to create a Group Focus, and set the Reference Element to my Pencil element.
Now, I want this group focus to be right in the center. We can achieve this by using Offsets. First, I want to offset the top just slightly, so I am going to give it a 5px offset. You’ll notice this just simply gives a little padding between the pencil and the group focus / tooltip. Now, it is important to know for the sake of offsets, the calculations are made from a 1x1 px in the top left corner of the group focus (or really any element, just a heads up!), so it will take some basic math for us to be able to center it exactly even.
If we click on our Tooltip / Group Focus, and hover over the pencil element, Bubble will show us the exact gap between the end of the Tooltip and the end of the pencil. This’ll be extremely helpful in getting it directly in the middle!
Now, we can see that I have a 130px distance. I am going to divide 130 / 2 and get 65. That is my offset! -65 !
Now, for the actual design of the Tooltip. I actually turn the Group Focus to be invisible, with No background color. Then, I add a group inside of it, such as this:
You can see when I added the group inside my tooltip, I left about 15 PX difference between the top of the tooltip and the top of the new group I just made. This is because I am now going to add an Icon element there.
Once I add the Icon element, I select the icon, and I type “Up” until I see this icon:
This icon is the one we want to create the look we are going for. Now, I just drag and drop, and move it around / resize it until I think it looks good! Here is the Width, heigth, X, and Y that I came up with that looks good to me:
Now, I am going to add some text in the middle, center align it, add some roundness to my background group, and BAM! My tooltip is complete:
I also resized the height of the background group a little bit. Feel free to design this however you want!
Alright, now for the logic as to how we are going to make it show up.
First we want to go to Workflows. We are then going to Create a New Workflow, “Do when a condition is true”
Once you’ve created it, you’ll want to make sure to change the interval for when this happens. For this kind of workflow, we have 2 choices. We can choose to either run it only once (the first time the condition is true, and that is it), or run it every time the condition is true. There are use cases for both situations, but for this, I want every time.
Now, for the actual condition. I only want this to run when the Pencil element is hovered. Here is how I created that:
Now for the finisher, we can choose to either merely display / show the tooltip, but I want mine to Fade In and Fade Out. We can do this through Element Animations.
The first thing you have to do when creating an animation, is choosing the Element. The element you want to animate is your tooltip. I have renamed my Group Focus to Tooltip for clarity.
There are many different animations. There are animations in which you can “Callout,” or bring attention to, certain elements. There are some animations in which ends in the element being hidden, and some which in ends in an element showing up.
The animation for today is FadeIn and FadeOut. We can see the warning here when we click FadeIn:
That is how we know the element will end visible.
Great, now we have it fading in. But now, I want it to also fade out. This part is super easy. I am going to right click on the workflow we just made, copy it, and paste it.
Now, in this new Workflow, I am going to change the condition to when Pencil is not hovered, and change the animation to FadeOut:
TADA!
You should now have a working Tooltip! Let’s see mine:
Hope you enjoyed this quick tip.
Questions you may have:
I can’t change the background style of my tooltip?
Make sure you change the Style to the blank one on the top of the dropdown box. Such as this:
I am using an icon pack, and when hovered isn’t an option. What can I do?
To get around this, we can do a little Bubble sneakery. The way we can go around this is by right click your icon / element, and placing it in a group all by itself:
That way, you can now do the hover event for the group!
Did you enjoy this tip? Let me know!
I would love to see how yours came out!
Any way to make it work on an icon within a Repeating Group? (I should also mention the icon is dynamically displayed, if that makes a difference)
