CoolTip (Pro Tooltip)
Enhances Bubble’s native tooltip system by allowing you to apply global, consistent styling across your entire app
5
Rating
24
Installs
v1.0.4
Version
Overview The Nebula – CoolTip (Pro Tooltip) enhances Bubble’s native tooltip system by allowing you to apply global, consistent styling across your entire app. Define the appearance once in the plugin panel, and every tooltip automatically adopts the new design — keeping your UI clean, professional, and unified.
When to Use
Everything you need in a single plugin
Form Field Instructions
Provide helpful hints and formatting requirements for input fields. Show examples, character limits, and validation rules without cluttering form layout. Reduces errors and improves completion rates.
Icon Explanations
Explain what icons mean when visual representation isn't immediately obvious. Make interfaces more discoverable and accessible to users unfamiliar with your iconography system.
Action Descriptions
Describe what buttons and links do before user clicks. Set expectations, prevent mistakes, and provide confidence. Especially useful for destructive actions or complex workflows.
Feature Information
Provide additional context about features without cluttering interface. Explain badges, premium features, status indicators, and locked functionality inline without separate help sections.
Abbreviated Text
Show full text when space constraints require abbreviations or truncation. Maintain compact layout while ensuring users can access complete information on demand.
Status Clarification
Explain status icons, badges, or colored indicators. Provide temporal context like last update time or next action. Help users understand current state at a glance.
Navigation Guidance
Guide users through complex interfaces or multi-step processes. Provide orientation, explain steps, and reduce cognitive load during navigation through unfamiliar sections.
Error Context
Provide detailed explanation of errors or warnings with suggested fixes. Help users understand and resolve issues quickly without external documentation or support requests.
Benefits
Everything you need in a single plugin
Zero Element Overhead
No visual elements to add in editor - pure HTML title attribute enhancement. Clean editor interface with no tooltip elements cluttering element tree or canvas.
Automatic Application
Works on all title attributes automatically across entire application. No manual initialization or workflow actions needed. Install, configure, and tooltips appear everywhere instantly.
Global Consistency
One configuration applies uniform styling to all tooltips. Ensure consistent look and feel across entire application. Change settings once and all tooltips update instantly.
Dynamic Detection
New elements added to page get tooltips automatically. Works with repeating groups, conditionally visible elements, popups, and workflow-created content without additional configuration.
Professional Appearance
Beautiful animated tooltips elevate UI quality beyond browser defaults. Smooth shift-away animation, custom styling, and smart positioning create polished professional experience.
Accessibility Friendly
Preserves title attribute for screen readers while enhancing visual presentation. Maintains semantic HTML and accessibility benefits of native title attributes.
HTML Formatting
Use HTML in tooltip content for structure and emphasis. Add line breaks, bold text, and basic formatting to create clear multi-line informational tooltips.
Smart Positioning
Popper.js positioning engine ensures tooltips stay in viewport. Automatically adjusts placement when default position would cause tooltip to overflow screen boundaries.
Per-Element Control
Override global settings for specific tooltips using bracket syntax. Custom placement, arrow visibility, and offset per tooltip while maintaining global defaults for consistency.
Performance Optimized
Efficient Tippy.js library with minimal overhead. Lazy tooltip initialization on first hover, optimized DOM observation, and automatic cleanup when elements removed.
Key Features
Everything you need in a single plugin
Placement Control
Position tooltips top, bottom, left, right, or auto with -start and -end variants for fine alignment. Smart viewport-aware positioning prevents tooltips from overflowing screen edges.
Delay Configuration
Control show delay in milliseconds to prevent accidental tooltip triggers during quick mouse movements. Configure globally or per element for optimal responsiveness.
Arrow Toggle
Show or hide arrow pointer connecting tooltip to element. Arrow provides clear visual relationship or hide for minimalist aesthetic. Global setting with per-element override.
Color Customization
Full control over background color and text color. Support for hex, RGB, RGBA, and color names. Create branded tooltips matching your design system perfectly.
Border Radius
Control corner rounding from sharp geometric 0px to soft rounded appearance. Match your application's overall border radius style for visual consistency.
Box Shadow
Add depth with customizable shadows using CSS box-shadow syntax. Control offset, blur, spread, and color for subtle depth or prominent elevation.
Padding Control
Adjust internal spacing between content and tooltip edges. Use single value for equal padding or multi-value for asymmetric vertical and horizontal spacing.
Font Sizing
Set text size independently from page body text. Ensure tooltip readability at any size with font-size control from compact to large display.
Shift-Away Animation
Smooth built-in animation when tooltip appears and disappears. Subtle shift-away effect adds polish and professional feel to tooltip interactions.
HTML Support
Use HTML formatting in tooltip content including line breaks, bold, italics, and inline styling. Create structured multi-line tooltips with emphasis and formatting.
Dynamic Content
MutationObserver automatically detects elements added after page load. Tooltips apply to repeating group rows, conditionally shown elements, and workflow-created content automatically.
Advanced Syntax
Override placement, hide arrow, or set custom offset per tooltip using bracket syntax in title attribute. Maintain global defaults while customizing specific tooltips.
Common Questions
Everything you need to know before installing
How do I add tooltips to elements?
Add title attribute to any element using the ID Attribute field in Bubble editor. Format: title="Your tooltip text". No elements to add or workflows to configure - tooltips appear automatically on hover.
Can I use HTML in tooltips?
Yes, HTML is fully supported. Use br for line breaks, strong for bold, em for italics, and span for inline styling. Example: title="<strong>Save</strong><br>Saves all changes". Keep HTML simple for best rendering.
How do I change placement for one specific tooltip?
Use bracket syntax in title attribute. Format: title="[placement] Content". Example: title="[bottom] This appears below". Options: top, bottom, left, right with -start/-end variants, auto, no-arrow, custom offset.
Does this work with dynamically added elements?
Yes, MutationObserver automatically detects new elements added to page and applies tooltips. Works with repeating groups, conditionally visible elements, popups, and workflow-created content without additional configuration.
Can I style tooltips differently per element?
Global styling only - one configuration applies to all tooltips for consistency. Per-element placement and arrow override supported through bracket syntax, but colors, fonts, and sizing are global.
What happens to the native title tooltip?
Cooltip removes native title on hover to prevent double tooltips, then restores it when tooltip hides. This preserves accessibility for screen readers while showing enhanced tooltip visually.
Does this work on mobile devices?
Yes, tooltips work on touch devices. First tap shows tooltip, tap elsewhere dismisses it. UX differs from desktop hover - consider inline help text for mobile-first applications.
What libraries does this use?
Built on Tippy.js for tooltip creation and animation, Popper.js for smart positioning, and MutationObserver API for dynamic element detection. All libraries loaded via CDN automatically by plugin.
Can I trigger tooltips on click instead of hover?
No, trigger customization not supported. Tooltips appear on hover only. This maintains standard tooltip behavior users expect and avoids conflicts with element click actions in Bubble workflows.
How does this affect performance?
Minimal impact. Tippy instances created lazily on first hover, not on page load. MutationObserver efficiently scans only new elements. Typical usage has negligible performance cost even with many tooltips.