Advanced Tooltip Plugin

Overview

The Advanced Tooltip plugin is a powerful and highly customizable tooltip solution for Bubble applications. It allows you to attach rich, animated tooltips to any element using its ID, with full control over content, styling, positioning, animations, and interaction behavior.
Designed for professional UI/UX needs, Advanced Tooltip supports formatted content, interactive tooltips, viewport-safe positioning, and smooth animations — all without breaking native Bubble behavior.

---

Description

The Advanced Tooltip provides real-time contextual information linked to any target element in your app. By simply defining a target element ID and tooltip properties, you can display dynamic tooltips that respond to hover, support rich text formatting (BBCode), and adapt visually to your design system.
It works entirely on the frontend, with instant feedback and zero impact on Bubble’s backend performance.

---

Main Features

🎯 Target-Based Tooltip

• Attach tooltips to any element using its ID attribute.
  
• Automatically positions relative to the target.
  
• Keeps tooltips inside the viewport.
  

🎨 Full Visual Customization

• Background color, font color, font size.
  
• Border radius, width, style, and color.
  
• Independent padding control (top, left, bottom, right).
  
• Min/max width and height support.
  

🧩 Rich Content Support

• BBCode parsing
  
• Automatic line break handling.
  

⚡ Smooth Animations

• Animation In / Out options:
  
• Fade
  
• Slide
  
• Scale (subtle)
  
• Perspective (subtle & extreme)
  

Custom animation durations.

🖱️ Interactive Behavior

• Interactive mode (hover tooltip without closing).
  
• Optional hide on click outside.
  
• Smart hover detection between target and tooltip.
  

📊 Real-Time State & Events

• Visibility state tracking.
  
• Bubble events triggered on show and hide.
  

---

Use Cases

💡 Feature Explanations
Explain buttons, icons, or form fields without cluttering the interface.

🧭 Onboarding & Guidance
Provide step-by-step hints for new users interacting with your app.

🛠️ Advanced Forms
Show validation rules or formatting tips when users hover over inputs.

📈 Dashboards & Analytics
Add contextual explanations to charts, metrics, or KPIs.

🧩 Interactive UI Components
Create hover-based menus, previews, or micro-interactions.