Services Plugins FAQs

Class/id stripped from Air Tooltip

Plugins
#1

Hi there,
I’m using your Air Tooltip plugin (thank you!) but I’m finding many scenarios where it needs custom CSS, but unfortunately any ID or class names (via the classify plugin) that are entered into the ID box for the toolltip gets overridden/removed at render time.

I understand that you’re generating your own ID for it, but it’s tough when the class names are also being stripped out.

Basically, I need a way to isolate individual tooltips with CSS and can’t see a way to do it with how you render them.

Is there any way you can prevent it from stripping class names?

To illustrate, using the Classify plugin you put {addClass: “class-name”} into the ID field, which is what’s being stripped out.

An alternative solution would be if you updated the “Use custom style” part of the plugin to have font size/weight, and padding for the title and content areas.

Any help gratefully received.
Thanks again for creating this plugin.

#2

Hi @oli2,
Thank you for reaching out.

Would it be convenient for you to share some screenshots of your setup? This will allow us to reproduce it on our side and check if the built-in themes override the CSS style classes.
Looking forward to your reply.

Best regards,

#3

Yes of course. Here you go. 4 screenshots.

  1. Shows a class “test-class-1” being added to the text element (using the Classify plugin)
  2. Shows inspecting the text element to see the class in the HTML
  3. Shows a class “test-class-2” being added to the Air Tooltip element in the same way
  4. Shows inspecting the tooltip to see the class does not show up in the class list in the HTML

3
31974×1808 203 KB

2
22290×886 370 KB

4
42172×1816 199 KB

1
12290×796 308 KB

You can check out the page here: https://app.presflow.com/version-test/test5

Using classify is just one example. If you put anything in the ID box it gets removed.
Hope that helps to demonstrate.

#4

Hi @oli2,
Thank you for your reply.

Please check the Styling guide for tooltips. Here is how you can apply custom classes to the tooltips: Style Guide · qTip2/qTip2 Wiki · GitHub
You can define the CSS style in a Bubble integrated HTML element by dragging it on the page and inserting the custom code.

Hope this information will be useful to you. :pray:
Looking forward to your reply.
Best regards,

#5

Thanks, that looks like it would only apply to all of them. I need to be able to target individual tooltips. Is that possible?

If so, which code should I be looking at on that page to be able to target an individual tooltip?

#6

Hi @oli2,
Thank you for your reply.

You might be considering creating custom tooltips by using focus groups and customizing them the way you want them to look, here you can find a tutorial on how to do that: How to Build Custom Tooltips in Bubble - YouTube

I will add your suggestion to the plugin backlog improvement list and we will investigate how feasible it is to implement these features in the nearest plugin update. I appreciate your understanding.

If there are any other plugin-related questions, please don’t hesitate to contact me, I’ll be glad to help! :pray:
Best regards,