How to Add Tooltips to Your Bubble.io Web App

The Power of Bubble.io for Creating Web Apps

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. 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. Though 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.

Creating a Simple Button with Tooltip

So a very quick example is I've got a button here. If I click on preview, we'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 Importance of Tooltips in User Experience

The button's not such a great example, but I don't know about you, but I sometimes find 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, well, something disastrous happened 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.

Using the Air Tooltip Plugin

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, 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. Let me show you how to use a tooltip plugin. The one we're using is air tooltip by Zeroqode. And so I've gone into the plugin directory. I've installed this plugin as of recording. It's completely free.

Adding the Tooltip Element to Your Page

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 mean, I can hide it right out of the way, but it has to be there in order to load in the right script. I can then go onto my elements and I'm going to delete the browser tooltip and add in an ID attribute. And so I shall call this one flag.

Configuring the Tooltip

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's 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.

Customizing the Tooltip

Okay, so now I'm getting a bit more of an attractive tooltip. I'm going to make a few quick changes 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.

Considerations for Mobile and Tablet 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. 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 fully responsive in its design for desktop, tablet, and mobile users. Just bear that in mind.