🧩 How to Use Smart Tooltip Pro Plugin: Smart Tooltip Pro
Created by: Devinilabs
Type: Tooltip system powered by Tippy.js
Trigger Method: Element ID

✅ Step 1: Enable Element ID Support in Bubble
Before you begin, you must enable Element ID attributes:

Go to Settings → General in your Bubble editor.

Scroll to the bottom and check the box labeled:
“Expose the option to add an ID attribute to HTML elements.”

🆔 Step 2: Assign Element ID to the Target Element
In the Design tab, select the element (like a button or icon) you want to attach the tooltip to.
-In the element’s Property Editor, scroll to ID Attribute.
-Enter a unique ID (e.g., loginInfo, helpIcon, tooltipBtn).

🎨 Step 3: Add the Smart Tooltip Pro Element to Your Page
In the Design tab, drag and drop the Smart Tooltip Pro element onto your page.

In its property panel, configure the following:

🔧 Required Fields
Property    Description
Element ID Must match the ID of the target element (e.g., tooltipBtn).
Tooltip Text The content shown inside the tooltip. Supports HTML and Bubble dynamic data.

✨ Step 4: Customize Tooltip Appearance and Behavior
Use the plugin’s properties to tailor your tooltip:

🎨 Style Options
-Font, Color, Size, Weight (auto-detects from Bubble styles).
-Background Color or Gradient Styles (linear, radial, candy, etc.)
-Border, Border Radius, Box Shadow.
-Padding, Z-Index, Max Width.

🧲 Behavior Settings
-Placement – top, bottom, left, right, or auto.
-Show/Hide Delay – in milliseconds.
-Appear/Disappear Duration – smooth animation control.
-Interactive Mode – allow links, inputs, buttons inside the
tooltip.
-Follow Cursor – let tooltip follow mouse movement.
-Hide on Click – optional dismissal behavior.
-Arrow Display – control size, color, and presence.