--1. Add the Plugin to Your Page Install the Native Tooltip plugin from the Bubble Plugin Marketplace.
In the Bubble Editor, drag and drop the Tooltip element (the plugin element) onto your page.

--2. Match the Tooltip to Your Target Element
In the Appearance tab of the tooltip element’s properties, look for Element ID.
Enter the unique ID of the element you want the tooltip to appear on (for example, if you have a button with the ID btn1, type btn1 here).
Tip: To give an element an ID, select that element in the Bubble Editor, check “Expose the option to add an ID attribute” in Bubble’s Settings → General, then set the ID in the element’s Property Editor.
--3. Set the Tooltip Content

In the text_tooltip field, type the text you want displayed when users hover over or focus on the target element.
If you’d like to create multiple tooltips on different elements, simply place additional Tooltip elements on your page or reuse the same one with different settings (if “Global” is enabled, see below).
--4. Adjust the Tooltip’s Visual Style



The following properties help you fine-tune how the tooltip looks:

Background: Pick the color for the tooltip’s background.
Background Blur-Effect & Blur Amount: Add a slight blur effect behind the tooltip if desired.
Roundness: Adjust the corner radius of the tooltip box for a more rounded or square shape.
Padding V and Padding H: Control the vertical and horizontal padding inside the tooltip.

--5. Control the Tooltip’s Position and Behavior
Alignment (top/bottom/left/right): Choose where the tooltip should appear relative to the target element.
Vertical Offset and Horizontal Offset: Nudge the tooltip’s position up/down or left/right.
Arrow: Enable or disable the small arrow pointing toward the element.
Follow Cursor: If enabled, the tooltip will follow the user’s mouse pointer as it moves.
Time to Hover: Set how long the user must hover over the element before the tooltip appears (in milliseconds).
AniTime: Control the duration of the tooltip’s fade-in/fade-out animation (in milliseconds).

6. Use the Global Option (Optional)
Global: When switched on, the plugin attempts to automatically attach tooltips to all elements on your page that have tooltip text (e.g., title, data-tooltip, etc.). This is a quick way to enable tooltips everywhere without manually configuring each one.

7. Preview and Test
Once you’ve configured your settings, click Preview to see the tooltip in action.
Hover over or focus on the target element. Your customized tooltip should appear with the styling, text, and behavior you’ve specified.

Editor: https://bubble.io/page?id=mooons-plugins&test_plugin=1743720180006x242621910722019330_current&tab=Design&name=hover_me&type=page

Run-Mode: https://mooons-plugins.bubbleapps.io/version-test/hover_me?debug_mode=true

Bug reports and feedback: [email protected]