Best tooltip plugin/method?

Hi all,

Just wondering what people are using for tooltips? I can create my own which display on mouseover, but I am sure there is a more elegant solution. Any light weight plugins out there? I’ve tried a few but none look good enough.

Cheers!

1 Like

Hi @darren.james7518, :wave:

If you’re looking for elegant and lightweight tooltip solutions, we recommend trying the following plugins:

  1. Air Tooltip Plugin for Bubble: This plugin allows you to add customizable tooltips to any element on your Bubble app. It provides various customization options, including position, color, and animation, to ensure the tooltips fit seamlessly into your design.
  2. Better Native Tooltip Plugin for Bubble: This plugin offers an easy way to create native tooltips with a sleek design. It’s highly customizable, allowing you to adjust the appearance and behavior to match your app’s style.

Additionally, you might find My Alerts useful. This plugin helps you create beautiful and customizable alerts for your application, enhancing user interaction and providing essential feedback.

We hope one of these plugins could be a great fit for your needs. :pray:

Cheers!
Zeroqode Support Team.

1 Like

I use Tippy.js which is good and never had any issues

4 Likes

Thanks, I will check it out.

1 Like

Ah great, the Better Native Tooltip Plugin for Bubble is actually just what I needed. Thank you!

2 Likes

Hi @darren.james7518, :wave:

We are glad we could help! If you have any more questions or need further assistance, please don’t hesitate to reach out. We’re always here to support you. :slightly_smiling_face:

If you’re enjoying our plugins, we’d greatly appreciate it if you could rate them. Just head over to the Plugins tab in the Bubble editor, find the plugin by name, and give it the stars you think it deserves. Your support means a lot to us!

Thanks again, and have a fantastic day!

Best regards,
Zeroqode Support Team.

I do have a question, is there a way to change the font size or character spacing? The letters look a little squashed and the font could be tiny bit smaller.

1 Like

Will do.

1 Like

Hello @darren.james7518, :wave:

Thank you for your question. We have asked our developers about the possibility of changing the font size or character spacing. We will get back to you as soon as we have a reply.

Thank you for your patience.

Best regards,
Zeroqode Support Team.

Hi @darren.james7518, :wave:

We have found a solution to change the font size and character spacing through an HTML element. You can simply use an HTML element and inside it set the font size to the tippy-box class as shown below:


image

<style data-tippy-stylesheet>
.tippy-box {
  font-size: 15px !important;  /* Adjust the font-size as needed */
}
.tippy-content {
  letter-spacing: 0.5em !important; /* Adjust the letter-spacing as needed */
}
</style>

Please see the test page we have created for your use case: better-native-tooltip | Bubble Editor

Additionally, if you would like to change other settings, you can use the code from here: CodePen Example. Just note that you will need to add !important as shown in the provided example to override the CSS.

We hope this helps! Feel free to reach out if you have any further questions!

Best regards,
Zeroqode Support Assistant.

2 Likes

Excellent thank you. This is the perfect tool tip solution now :slight_smile:

1 Like

Hi @darren.james7518, :wave:

Glad to be helpful. Please feel free to reach out to us again whenever you need assistance. It will be a pleasure to cooperate. :slightly_smiling_face:

Furthermore, if you’re willing to share your entire experience with Zeroqode, we invite you to do so at: Review. Your feedback is incredibly valuable to us and the Bubble community, as it motivates us to continue developing outstanding products and maintaining excellent customer service. :blush:

Thank you again, and I wish you an amazing day ahead.

Best wishes,
Zeroqode Support Team.