[NEW PLUGIN] Tooltip plugin

Showcase Plugins
22

Hi SeanHoots,

I added the tooltip to an element in my repeating group, but it only works for the first item. Can you explain it in a little more detail?

Thanks!

Silvio

23

Hey @Bubbleboy, you guys are right. seems something got broken. will take a loo at it over the weekend

2 Likes
24

Hi @Silvio,
If you want to use the tooltip in a repeating group, you need to assign dynamic expression (using the index) for the id attributes to the triggering element and use that same dynamic id expressions for your tooltips.
e.g.
For your triggering element, set the id attribute like below. So here the elements will be giving id’s like 0tp, 1tp, 2tp

tooltip1
tooltip1772×386 22.8 KB

Then in the tooltip triggering element id attribute enter the same expression you used in the element attribute id above

tootip2
tootip2808×405 24.1 KB

Hope this helps. I just tested it and it works.

4 Likes
25

Thanks Sean, it worked!

26

Hi Sean,

Did you fix this? I still get a yellow tooltip no matter what theme I use, and creating a theme just adds a coloured border/background around the yellow/cream tooltip

2 Likes
27

New Update - Version 1.4.0
I’ve just released a new version of the plugin with the following updates:

  1. Added ability to have a close button on the title.
    Even if title is not present you can have the close button.
    You can show the close button by selecting close in the Hide event property.
    See below snapshot
    image
    image
    image
  2. Fixed the issue with themes not working.
    Unfortunately i had to remove the custom style as it was interfering with the themes thereby not making the themes work. I also realized that defining a custom style for all tooltips will be a pain so just choosing from one of the available 12 themes should be sufficient enough for most applications.
    If you really really need to have some custom crazy style pm me and lets see what we can do.
    image
  3. Added ability to set mouse as the tooltip target..
    When this option is chosen, you can also set the property Move with mouse to choose to either to let the tooltip move as you move the mouse on the trigger element or let the mouse stay at the first point of entry in the trigger element.
    image

FYI : @help, @Bubbleboy, @Tim_h

3 Likes
28

@seanhoots I’m awed, thank you

29

I’m loving your plugin @seanhoots,
I wonder if it is possible to have it in RTL support, I use it for Arabic apps. Also, customizing the font would be great.

Thank you for this awesome Plug in.

30

I got this to work for 2 icons, now it wont work for anything else. Even copy and pasting the same tooltip and icon that work doesn’t work.

Anyone else having this problem?

31

@raf970 I have the same problem here. Tried setting up air tooltips on inputs / icons but neither work.

@seanhoots can you confirm that everything is ok with your plugin?

Appreciate your kind help :slight_smile:

32

Ok will take a look at it.

33

@seanhoots Loving the plugin, it works great and it’s very useful!
I have a concern however… When on a mobile device a tooltip that is set to appear on mouseenter and disappear on mouseleave will appear when the user clicks on the triggerelement. This becomes a problem for clickable elements on mobile because the user has to press the element twice, on the first press the tooltip appears, and then he has to press it again to do the action. Tried avoiding these issue by hiding the Airtooltip when the page is below a certain width, but this is not working, and it would not the best solution anyway because of certain tablets with wide screens or computers windows shrunk to smaller sizes. Is there a better way to solve this issue?
Thank you in advance

34

For some reason doesn’t work for me. I tried more than 10 times this:

Instructions:

  1. Go to the settings page in your editor. Under the General tab click on the checkbox “Expose the option to add an ID attribute to HTML elements”
  2. To attach a tooltip to an element (text,input,multiline input, button), enter a name at the “ID Attribute” field in the property editor of the element.
  3. Pick and drop the Air tooltip element on the page. It doesn’t matter where you drop it. It wont be visible on the page when previewed.
  4. In the Trigger element id attribute of the tooltip, enter the same name you entered in step 2.
  5. Choose your options and you’re done.
    NB: To use your own style make sure you have checked the box, “Custom style”.
    NB: Currently this works for the following elements: buttons, texts, inputs, multiline inputs.
    Yes you can use this in a repeating group. Use the index of the field with some text to create some expression for the Element ID attribute and use the same expression for your tooltip.

and still can’t make it work.
What do I do wrong?

35

This is awesome! Thank you so much for making this. I was able to use it on a repeating group using the instructions here. :raised_hands:

36

@seanhoots is there a way to get this to work in a repeating group and not affect the repeating groups design set up.

Essentially I have a repeating group that has small boxes representing an acronym. I want the tooltip to display about the acronym box but the set up of my repeating group has the acronym box centered and aligned.

The problem is that when I add the tooltip to the repeating group I get a strange flashing of the tooltip on hover of the acronym box…this seems to be because of where I placed the tooltip on the design page ( right on top of the acronym box as there is no other space in my repeating group )

39

I know its probably a lot of work but it would be incredible if we were able to manually adjust the colors (title & Content) & the font size…

Still love this one though and i plan on using it for all my pages :stuck_out_tongue_winking_eye:
Thanks!

40

I have issue.
com-video-to-gif%20(9)
This A and B is same setting but it has different behavior.

41

I’m wondering if this can be used to make a Conditional tooltip?

I am making a Like/Dislike system, like YouTube has - when someone has not liked anything yet, the Tooltip should say “I like this”, and if they have already liked the thing, then the tooltip would say “Unlike” to show them how to like and unlike something.

I don’t think that is possible with Bubble’s in-built Tooltip - would it be possible with this plugin?

N.B. The only review for this plugin says that it is broken. Is it working for others?

42

@seanhoots, is this plugin still functional? I like the appearance of it more than the copilot plugin, but I have not been able to get it to work. Ideally, I would like it to be able to work with an icon (triggered on click), but I have also tried it the following ways since icon wasnt mentioned as specifically supported, and I havent gotten any of these to work either:

  • button (triggered on mouseenter)
  • text (triggered with click and mousenter).
  • input (triggered on mouseenter)
1 Like
43

Is anyone else getting an error when using this on a re usable element

I’m getting this

The plugin Air Tooltip / element Air tooltip threw the following error: anonymous
https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e5f32a6021f27dc32360a878fcdf05921d590a733c99cdef9138de88a55bd65c/xfalse/x8:18:477115
L@https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e5f32a6021f27dc32360a878fcdf05921d590a733c99cdef9138de88a55bd65c/xfalse/x8:18:465462 (please report this to the plugin author)

1 Like