CoolTip (Pro Tooltip)
CoolTip (Pro Tooltip)
CoolTip (Pro Tooltip)
Enhances Bubble’s native tooltip system by allowing you to apply global, consistent styling across your entire app
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
Action Descriptions
Feature Information
Abbreviated Text
Status Clarification
Navigation Guidance
Error Context
Benefits
Benefits
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.
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.
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
Key Features
Everything you need in a single plugin
Placement Control
expand_morePosition 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
expand_moreControl show delay in milliseconds to prevent accidental tooltip triggers during quick mouse movements. Configure globally or per element for optimal responsiveness.
Arrow Toggle
expand_moreShow 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
expand_moreFull 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
expand_moreControl corner rounding from sharp geometric 0px to soft rounded appearance. Match your application's overall border radius style for visual consistency.
Box Shadow
expand_moreAdd depth with customizable shadows using CSS box-shadow syntax. Control offset, blur, spread, and color for subtle depth or prominent elevation.
Padding Control
expand_moreAdjust internal spacing between content and tooltip edges. Use single value for equal padding or multi-value for asymmetric vertical and horizontal spacing.
Font Sizing
expand_moreSet 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
expand_moreSmooth built-in animation when tooltip appears and disappears. Subtle shift-away effect adds polish and professional feel to tooltip interactions.
HTML Support
expand_moreUse HTML formatting in tooltip content including line breaks, bold, italics, and inline styling. Create structured multi-line tooltips with emphasis and formatting.
Dynamic Content
expand_moreMutationObserver automatically detects elements added after page load. Tooltips apply to repeating group rows, conditionally shown elements, and workflow-created content automatically.
Advanced Syntax
expand_moreOverride placement, hide arrow, or set custom offset per tooltip using bracket syntax in title attribute. Maintain global defaults while customizing specific tooltips.
FAQ
FAQ
Common questions