Tooltips in Bubble display helpful text when users hover over elements, providing context without cluttering the interface. This tutorial covers using Bubble's built-in tooltip property for simple text hints, creating custom tooltip groups with rich content like images and formatted text, positioning tooltips correctly relative to trigger elements, and handling tooltip behavior on mobile devices where hover is unavailable.
Overview: Adding Tooltips to a Bubble App
This tutorial shows you how to add tooltips to your Bubble app using both the built-in tooltip property for simple text and custom tooltip groups for rich content. You will learn positioning techniques and mobile-friendly alternatives.
Prerequisites
- A Bubble app with elements that need contextual help text
- Basic familiarity with the Bubble visual editor and Conditional tab
Step-by-step guide
Use Bubble's built-in tooltip property
Use Bubble's built-in tooltip property
Select any element in the Bubble editor. In the Property Editor, look for the 'Tooltip text' field in the Appearance section. Enter your tooltip text — for example, 'Click to save your changes.' When users hover over this element in the live app, a small tooltip appears with the text. This works for simple text-only tooltips. The built-in tooltip uses the browser's native tooltip rendering, which means styling is limited to plain text.
Expected result: Hovering over the element displays a plain text tooltip.
Create a custom tooltip group for rich content
Create a custom tooltip group for rich content
For styled tooltips with formatted text, icons, or images, create a Group element positioned near the trigger element. Design the Group with your tooltip content — a text element, optional icon, styled background, rounded corners, and a subtle shadow. Uncheck 'This element is visible on page load' to hide it by default. On the trigger element, add a Conditional: 'When This Element is hovered' → Show the tooltip group (or use a workflow). Add another Conditional on the tooltip group: 'When This Group is not hovered and Trigger Element is not hovered' → hide it.
Pro tip: Add a small triangle shape (CSS arrow) at the edge of the tooltip group pointing toward the trigger element for a polished look.
Expected result: A styled tooltip with rich content appears on hover and disappears when the mouse moves away.
Position tooltips relative to trigger elements
Position tooltips relative to trigger elements
Place the tooltip group directly above, below, or beside the trigger element in the editor. Use the Align to Parent container type or fixed positioning relative to the trigger. For tooltips that should appear above the element, position the tooltip group so its bottom edge aligns with the trigger's top edge. Set a z-index higher than surrounding elements to ensure the tooltip appears on top. If the tooltip might overflow the page edge, add conditions to flip the position (e.g., show below instead of above when near the top of the page).
Expected result: Tooltips appear in the correct position relative to their trigger elements without overlapping other content.
Handle tooltips on mobile devices
Handle tooltips on mobile devices
Hover-based tooltips do not work on touchscreens since there is no cursor. For mobile, convert tooltips to tap-triggered info panels. Add a small info icon (i) next to the element. On tap, show the tooltip group and add a close button or tap-outside-to-dismiss behavior. Use responsive breakpoint conditions: show hover tooltips on desktop and tap-triggered info icons on mobile. Alternatively, use the built-in tooltip property which some mobile browsers show on long-press.
Expected result: Mobile users can access the same contextual information through tap interactions instead of hover.
Complete working example
1TOOLTIP IMPLEMENTATION REFERENCE2==================================34SIMPLE TEXT TOOLTIP:5 Element → Property Editor → Tooltip text: 'Your help text'6 Browser renders native tooltip on hover7 Pros: Zero setup, no extra elements8 Cons: Plain text only, no styling control910CUSTOM RICH TOOLTIP:11 1. Create Group (tooltip):12 - Styled background, rounded corners, shadow13 - Text, icons, or images inside14 - Not visible on page load15 - Z-index: higher than surrounding elements1617 2. Show on hover (Conditional tab):18 Trigger element condition:19 When This Element is hovered → Show tooltip group20 Tooltip group condition:21 When not hovered and trigger not hovered → Hide2223 3. Positioning:24 Place tooltip adjacent to trigger25 Use Align to Parent for precise control26 Add CSS arrow pointing to trigger2728MOBILE FALLBACK:29 Desktop: Hover-based tooltip (Conditional visibility)30 Mobile: Tap info icon → show tooltip group + close button31 Detection: Responsive breakpoint conditionsCommon mistakes when adding tooltips to a Bubble.io app: Step-by-Step Guide
Why it's a problem: Forgetting that hover tooltips do not work on mobile touchscreens
How to avoid: Add tap-based alternatives on mobile breakpoints using info icons and tap-to-show interactions
Why it's a problem: Placing tooltip groups too far from their trigger elements
How to avoid: Position the tooltip group so it overlaps or directly touches the trigger element edge, allowing the mouse to travel between them
Why it's a problem: Using tooltips for essential information
How to avoid: Put essential information in visible labels or descriptions. Reserve tooltips for nice-to-have contextual hints.
Best practices
- Use built-in tooltip text for simple hints that need no styling
- Create custom tooltip groups when you need formatted text, images, or icons
- Ensure tooltip groups touch or overlap the trigger element to prevent flickering
- Set high z-index on tooltip groups so they appear above all other content
- Provide tap-based alternatives for mobile users who cannot hover
- Keep tooltip text concise — under 2-3 sentences
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add helpful tooltips to my Bubble.io app that show explanations when users hover over buttons and form fields. Some tooltips need to show formatted text with icons. How should I implement both simple and rich tooltips?
Add a custom tooltip to a form field that shows on hover. The tooltip should have a dark background, white text, rounded corners, and a small arrow pointing to the field. On mobile, replace it with an info icon that shows the tooltip on tap.
Frequently asked questions
Can I use dynamic data in tooltips?
The built-in tooltip text property supports dynamic data expressions. For custom tooltip groups, use Text elements with dynamic data inside the group.
How do I prevent tooltip flickering?
Ensure the tooltip group overlaps or directly touches the trigger element. If there is a gap, the mouse leaves the trigger before reaching the tooltip, causing it to disappear and reappear rapidly.
Can I show tooltips on click instead of hover?
Yes. Use a workflow on the click event to toggle a custom state that controls the tooltip group's visibility. Add a click-outside handler to dismiss it.
What is the best tooltip position — above or below?
Above is most common for inline elements. Below works better for top navigation items. Whichever you choose, be consistent across your app.
Can RapidDev help implement a tooltip system in Bubble?
Yes. RapidDev can create reusable tooltip components with consistent styling, proper positioning, and mobile-friendly alternatives for your entire Bubble app.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation