🚀 [NEW PLUGIN] Advanced Tooltip

Hello fellow Bubblers!
We have recently published a new plugin and would like to share this news with you:

Advanced Tooltip - the plugin is based on the tippy.js library.
Tippy.js is the complete solution for the web, powered by Popper.
Tippy.js is a small yet highly customizable JavaScript tooltip library that helps you add customizable, interactive, animated, accessible, touch-friendly tooltips to any DOM element.

It provides the logic and optional styling of elements that “pop out” from the flow of the document and float next to a target element.

  • Smart: will always float optimally in view
  • Fast: high performance for low-end devices
  • Universal: compatible with mouse, keyboard, and touch inputs
  • Customizable: fine-tunable functionality and fully stylable with CSS
  • Themeable: style via custom CSS, includes extra themes and animations

Key features:

  • works with most standard elements (Text, Button, Icon, Image, Group, RepeatingGroup, Input, Dropdown, Checkbox, RadioButtons and others), as well as elements of custom plugins.
  • Supports all positions: auto,auto-start,auto-end,top,top-start,top-end,right,right-start,right-end,bottom,bottom-start,bottom-end,left,left-start,left-end
  • Custom trigger events: mouseenter, focus, click or manual.
  • 5 built-in amazing animations: fade,perspective,scale,shift-toward,shift-away .
    -4 built-in themes: light, light-border, material, translucent + custom (allows you to customize the color scheme yourself)
  • Allows to embed any HTML markup inside the tooltip.
  • Allows multiple tooltips on the same element.
  • Allows you to use one plugin element not only with a single element on the page, but also with a group of elements.
  • Works in Repeating Group.
  • Useful callback functions.

Demo:
For detailed connection and demo information, visit the plugin demo page at

There you can go to the editor (OPEN EDITOR).

Plugin page:

Support
If you have questions, reach out to us at support@mindforapps.com
We appreciate your reviews and suggestions.

Cheers
Jay | Mindforapps

5 Likes

Nice work, very comprehensive.

2 Likes

That’s a really great plugin! :clap:
Congrats! :slight_smile:

1 Like

Thank you.
It’s nice to hear kind words.
We tried very hard.

Just purchased. Good work here.

1 Like

@MindForApps Thanks for this! I needed a tooltip that could include html.

A couple of comments to help others - the OPEN IN EDITOR link on the demo page takes you to the correct editor, with the wrong page open. You have to navigate to the advanced_tooltip page. EDIT: The team fixed this problem immediately. Thanks!

Also, I don’t think it says this in the docs, but the element must be visible on page load in order for this plugin to work. I had my tooltip in an element that was only visible on page load when a conditional was true. Even when that conditional was true upon page load, I think the time it took to evaluate the conditional and show the element was too long, and the tooltip did not work . EDIT: The team also fixed this right away.

Hello!

Thanks for pointing this out. The link has now been fixed and leads to the correct page.

We’ll think about what we can do about it.
Perhaps we will add the ability to load/reload the plugin through the workflow. And in the event that the element is hidden, then run the plugin through the workflow after the element is displayed.
But this is just an idea so far and we’ll see what and how we can do with it.

Thanks again.

1 Like

Hi all!

Added new action - “start”. It can be used to attach a plugin (tooltip) to an element that is hidden on page load.
Now, after you make the element visible in the workflow, you can launch the plugin via the “start” action.

A small example has been added to the demo page:

Please update the plugin to version 1.1.0

Thank you.
Good luck.

Thank you for this!

@MindForApps is it possible to trigger a workflow from an element inside the tooltip? I’ve tried adding a script within the tooltip itself, while having allow HTML checked. I’ve also attempted to place the script outside the tooltip and reference a div id and I can’t get it to work. Any ideas?

Unfortunately, this cannot be done using standard means.
Surely there are simpler and more beautiful ways, but the first thing that comes to my mind is to use the additional “Toolbox” plugin.

Here I have created a simple example for you:

On the page (Design):
Extended tip:
1. Enable the parameters: “alawHTML” and “interactive”.

28

Image 29

2. In the “content” field, enter the HTML you need.

For example, I specified two buttons and assigned them identifiers (btn1, btn2), by which we will track clicks on these buttons.
Image 30

Toolbox:
3. Place the “JavascripttoBubble” element from the Toolbar on the page, assign it a suffix (in the example “start_wf”), enable the “Trigger Event” and “Publish Value” parameters, specify the desired “Value Type” (in my example “text”)

workflow:
4. We will monitor the onShow event for the AdvancedTooltip element.
Based on this event, we will launch the “Run javascript” action, in which we will specify this script:

function myFunction(e) {
  if (e.target.id === "btn1") {
	bubble_fn_start_wf( 'context 111')
  }
  if (e.target.id === "btn2") {
	bubble_fn_start_wf( 'context 222' )
  }
}
document.querySelector('.main-page').addEventListener('click', myFunction, false);

We will not be able to attach an event handler to the buttons (btn1, btn2), since at the time of running this script these buttons are still hidden, and the event handler will have to be attached to the entire page (‘.main-page’), but then only clicks on the necessary ones are processed buttons. Depending on which button you click, we will transfer the corresponding content (text in the example) to bubble_fn_start_wf.

5. Finally, we will monitor the firing of our script. Set “JavascripttoBubble Event”
In this example, we open a “popup” and pass the relevant content to it through the “set state” using the “Value of this JavascripttoBubble”.

.
I think this will help you and based on this example you will be able to do what you planned. I hope I haven’t confused you further.

1 Like

@MindForApps That is so helpful! Thank you so much. I was pulling my hair out last night trying to get this to work. I really appreciate you taking the time to explain that and create a working example.