[New plugin] Modern & Stable Tooltips

[Thimo]

This plugin adds modern-looking tooltips to your application. It was created to address the deficiencies of other tooltip plugins and offer a stable solution for use in production. This plugin is completely built from scratch to be as performant and stable as possible.

Demo page (editor is public): Modern & Stable Tooltips
Plugin page: Modern & Stable Tooltips (Tooltip) Plugin | Bubble

Fully customizable.
Use data from a data source like an option set, or providing a comma-separated list.
Supports HTML inside the tooltips for advanced layouts.

Questions? You can reply below, send me a PM on the Bubble forum (@thimo) or send me an email (‘contact’ button on my contributor page).

[2706mason]

Amazing work as always! Can’t wait to try this one out.

[gradylam]

Hi Thimo,

Thanks for creating the Mordern & Stable Tooltips. They work well, except, for some reason, the tooltip’s height does not fit to the text. It has some extra space at the bottom. Please see the screenshot below. I tried putting the element in a group and fitting the height to the content, setting padding, etc., but the problem persisted. Is there any possible explanation and fix for this?

Thanks,

Grady

[Thimo]

Hi @gradylam! Do you have any other plugins / custom HTML on the page that could cause this behavior? The width of the plugin will always fit height to content as you can see here: Modern & Stable Tooltips

I think that should be the cause. However, you might have set a large bottom padding by default:

So you might want to check that as well

[gradylam]

To compensate for the larger bottom spacing, I made the bottom padding 0. But it still shows a larger space.

[Thimo]

@gradylam Did you investigate the following? →

@Thimo

Do you have any other plugins / custom HTML on the page that could cause this behavior? The width of the plugin will always fit height to content as you can see here: Modern & Stable Tooltips

Let me know! Could be another plugin or some HTML/CSS on the page that causes this issue. If you want me to look into it for you let me know and I send you a DM

[gradylam]

Hi Thimo,

The element is in a reusable header. There isn’t any custom HTML or other plugins on the reusable. Although I do use many other plugin for my single-page app, I can’t think of anything that would have specified the height of the tooltips.

I do have an html element for displaying html text. I have attached the HTML below:

Styled Content body { font-family: 'Inter', sans-serif; } /* Reset top margins for the first paragraph and the ordered list */ body, p, ol { margin-top: 0; padding-top: 0; line-height:1.5; }

    p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    ul, ol {
        font-size: 16px;
        line-height: 1.5;
        padding-left: 35px; /* Adjust padding as needed */
    }
    
    ul li, ol li {
        margin-bottom: 0.5em; /* Optional: space between list items */
    }

           pre {
        background-color: #3E3E3E;
        border: 1px solid #ddd;
        padding: 1em;
        overflow: auto;
        font-family: 'Courier New', Courier, monospace;
        white-space: pre-wrap;       /* Since CSS 2.1 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
        color: #f8f8f2; /* Greyish white text color */
        border-radius: 10px; /* Rounded corners */
        margin-bottom: 20px; /* Adjust this value as needed for desired spacing */
    }

    code {
        display: block; /* For block-level code formatting */
    }
img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes extra space below images */
}
</style>

Do you see anything that would interfere with the plugin?

Thanks.

[Thimo]

Hi @gradylam thanks for providing the HTML. It seems like you have very broad CSS selectors. You are for example targeting all <p> (paragraph) tags. It seems like you are setting a bottom margin for all p tags on your page. The text in the tooltip is actually also a p tag. I would recommend to use more specific selectors so you only target the elements you need to be targeted.

This is what happens when you place a 10px bottom-margin on the p tags:

Hope this helps!

[gradylam]

Got it. I edited my HTML elements, and they fit to height now.

One other question. Can we add a little arrow to the tooltip like the picture below?

Thanks!

[Thimo]

Hi @gradylam, the arrow is left out of the plugin as a design choice. I did try to include it but it looked weird imo and interfered with some styling options. However, it is on my list to explore the option to try to implement it again!

[gradylam]

Got it. Thanks.

Also, another issue. I got this error showing up. Could you take a look?

The plugin Modern & Stable Tooltips (Tooltip) / element Modern Tooltips threw the following error: Error: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘#’ is not a valid selector.
at l (PLUGIN_1666634621159x417257237670527000/Modern—Stable-Tooltips–Tooltip–update–Modern-Tooltips-.js:3:5449)
at eval (PLUGIN_1666634621159x417257237670527000/Modern—Stable-Tooltips–Tooltip–update–Modern-Tooltips-.js:3:10943) (please report this to the plugin author)

[Thimo]

@gradylam this is caused by the element ID being empty. Make sure to supply an element ID in the plugin properties. If you use a dynamic expression make sure it is never empty

[gradylam]

Got it. I have a comma after the last element ID. That caused the issue. Thanks for the quick reply.