🚀 [NEW PLUGIN] Advanced Tooltip

Showcase
1

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

tippy_2
tippy_2512×512 19.9 KB

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
2

Nice work, very comprehensive.

2 Likes
3

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

1 Like
4

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

5

Just purchased. Good work here.

1 Like
7

@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.

8

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
9

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:

Image 102
Image 1021111×489 27.4 KB

Please update the plugin to version 1.1.0

Thank you.
Good luck.

10

Thank you for this!

11

@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?

12

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.

Image 32
Image 32841×543 36.9 KB

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”.

Image 33
Image 331043×441 31.2 KB

.
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
13

@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.

14

@MindForApps I just purchased this plugin and cannot get it to work in a RepeatingGroup. Is there anything I’m missing. The IDs I’m using are dynamic with the cell number… Not sure what else I need to add

15

Hello!

To work with a repeating group, you need to assign dynamic IDs to target elements (and if necessary, to trigger elements)
Place the AdvancedTooltip plugin element in the repeating group cell and specify the required identifiers (also dynamic)

Here is the simplest example:
There is a “TEST” button in the repeating group, which will act as a target.

Assign a dynamic ID to this button

Image 229
Image 229576×750 44 KB

Place the AdvancedTooltip element in the repeating group cell and specify the dynamic ID of the “TEST” button in the “target ID” field.
Leave the “Trigger ID” field empty, which means that the target element will act as a trigger.
Connect the content we need that will be displayed in the pop-up tooltip.

Image 230
Image 230582×601 30.6 KB

Here is the result (this is a GIF, play it if necessary)
tooltip

This is the simplest example. You can find more complex use cases of the plugin with a repeating group on our demo page:

We tried to create a detailed manual for the main use cases of the plugin.
(Go to the editor (OPEN IN EDITOR at the top of the page))
Pay attention to the sections:

I think this will help you.