Replace the native tooltip by creating your own using Bubble elements. Very simple to use.
Perfect for:
⭐ Modern UI design
⭐ Improving user experience
⭐ Reusable element for consistent appearance across your entire app

Features:
📌 Custom styling using your own Bubble elements
📌 Adjustable animation speed and delay
📌 Multiple animation types (ease, linear, slide)
📌 Works with dynamic content

Pro tip:
🔥 Pair with our 'SVG Element' plugin for customisable Icon tooltips!

----------------------------------------------------

HOW TO USE:
For any help please don't hesitate to ask me in my discord @ https://discord.gg/sdbxfjvvYx.


Step 1: Create the custom Element

When creating a custom tooltip its ideal to make it as a reusable element when possible. For a better editor experience I make the reusable a floating group so it doesn't interfere with your other elements.

The most basic way to build one is to have a *Group* element and a *Text* element within that group.

Customise the style and responsiveness however you please.

* Put whatever text you want in the text element as it will be replaced when being rendered as a tooltip.


Step 2: Add the plugin

This is the time to add the Custom tooltip plugin element on the page/reusable element.

* Don't put it in the Group you created in Step 1. If using a reusable element just put it at the bottom of the layers in the element tree. There is a rare bug when put at the top.

* In the layout tab, make sure the 'This element is visible on page load' is checked as true so it will be visible on load.


Step 3: Create the ID's

Select the Custom tooltip plugin from the element tree and navigate to the Appearance tab.

At the top of that section you will see Container ID and Tooltip ID fields. Put whatever text you want in there, just make sure they are not the same.

Example:
Container ID: "tooltip-container"
Text ID: "tooltip-text"


Step 4: Turn on ID attributes in settings

We need to make sure ID attributes are exposed in your apps settings.

1. Go to Setting in your app, navigate to the General tab.
2. Scroll all the way to the bottom and check the box that says "Expose the option to add ID attribute to HTML elements".
3. Done! Go back to your custom tooltip page/reusable.


Step 5: Match the ID's

Container ID: Copy the text you put in the Container ID field in the plugin, then select the Group you created in Step 1, then navigate to the bottom of its appearance tab and paste the ID you copied into the ID attribute field of the Group.

Text ID: Very similar to the container but instead copy the Text ID you created in the plugin and then select the Text element you created in Step 1 and paste the Text ID in the ID attribute field of the Text element.


Step 6: Test it out

If you're using a reusable element then go to a page and put the tooltip RE in that page. Make sure its set to visible in the layout settings but feel free to set it to a fixed width and height of 0px so its not visible in your editor.

Grab an element that has a Tooltip field like a Button, or install our SVG element plugin so you can have custom icons that have custom tooltips.

Now simply write whatever text you want in the tooltip field of your button and then preview the page. Hover over the element that has the tooltip text and you should see you custom designed tooltip!

If not check that you have follwed the steps exactly, mainly that all elements are visible and all plugin ID match their corresponding elements ID's.

Step 7: Animations[/b] (optional)

Customise the animations as you please.

The default settings are my current favourite and match the Shadcn/ui design system I use when building the Createkit template - check it out, it's amazing and free!

----------------------------------------------------

💬 COMMUNITY
Need help or have suggestions? Join our Createbase community @ https://discord.gg/sdbxfjvvYx