Bubble.io has become a powerhouse for creating fully functional web apps without any coding skills, and mastering its features can significantly improve your user's experience.
Browser tooltips with Bubble.io
One such feature you should consider learning about is adding tooltips to your apps. In this mini tutorial, I'll teach you how to create and customize tooltips to guide your users and enhance your user experience. Before we get started, it's worth remembering that an action on hover doesn't mean anything in mobile and tablet devices. There is no such thing as hover unless your user is basically using a mouse.
So a very quick example is I've got a button here. And if I click on preview, you'll see that when I put my mouse over it, nothing happens apart from the background transitions on the button. But what if I wanted to give my users an additional prompt if they hovered over it? So the button says, click me, but what if for some reason it said, don't click me? So I'm using tooltips that take advantage of the web browser, detecting that there's a tooltip there and displaying it below the mouse. And it doesn't look very good.
But it's very important. The button is not such a great example. I don't know about you, but I sometimes found myself in an application in a web app, and I see a button that is just an icon, and I'm thinking, Well, what does that do? I don't know. And if I click it, something disastrous happen to my account? So tooltips can be very useful for prompting the user into and explaining what's going on when they hover over a button. So I don't know why this might be useful in your SaaS app, but we could have a tooltip on here called raise the flag. And if we click on preview, a user can then, if they're not sure what the button does, they can hover over it and they get the prompt. The tooltip raised the flag. But it's not very attractive.
Air Tooltip Plugin for Bubble by Zeroqode
Let me show you how to use a tooltip plug in. The one we're using is Air Tooltip by Zeroqode. And so I've gone into the plug in directory. I've installed this plug in as of recording. It's completely free. And I'm going to add in an element onto the page.
As is the case with many Bubble plugins, if I want something loaded in on the page, something visual, I have to add in the element somewhere on my page structure. I can hide it right out the way, but it has to be there in order to load in the right script. I can then go on to my element and I'm going to delete the browser tooltip and add in an ID attribute. And so I shall call this one flag. And then if I find my tooltip again, I'll say that the trigger is going to be when the mouse goes over the flag and the target where the tooltip is located is also going to be the same element. And so I can give it a title, raise the flag, and I can say, click this button to raise the flag. Let's have a look and see what that gives us out of the box. Okay, so now I'm getting a bit more of an attractive tooltip. I'm going to make a few quick change to that. I mean, there are loads of options here that you can customize. I'm going to say target mouse, move with mouse.
I'm going to give it an effect of fade out and an effect of fade in. So there we get the effect. And also now we get it following the mouse. Obviously, you'll need to choose something that fits with the design of your app, something that is actually going to be helpful to your users. And lastly, just remember that anything that happens on hover is not going to happen for someone on their phone or on their iPad. Now, yeah, so don't exclude information from users just because they aren't using a mouse, especially if you are making your app to be very responsive in its design for desktop, tablet, and mobile users. Just bear that in mind.