[New plugin] Modern & Stable Tooltips

Thimo · 2024-08-09T15:43:55.908Z

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.

ezgif-6-34ec327f98

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 · 2024-08-09T21:48:27.333Z

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

gradylam · 2024-09-03T02:16:52.191Z

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?

Screenshot 2024-09-03 at 10.15.35 AM

Thanks,

Grady

Thimo · 2024-09-03T07:46:22.364Z

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:

2024-09-03 om 09.45.38802×382 19.2 KB

So you might want to check that as well

gradylam · 2024-09-03T13:06:53.211Z

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

Screenshot 2024-09-03 at 7.37.02 PM

Thimo · 2024-09-03T13:26:28.000Z

@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 · 2024-09-03T15:39:32.334Z

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 · 2024-09-03T15:59:27.425Z

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:

2024-09-03 om 17.57.582572×556 118 KB

Hope this helps!

gradylam · 2024-09-04T04:45:24.761Z

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?

Screenshot 2024-09-04 at 12.43.26 PM

Thanks!

Thimo · 2024-09-04T14:37:06.621Z

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 · 2024-09-07T10:03:21.746Z

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 · 2024-09-07T10:16:34.114Z

@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 · 2024-09-08T05:31:54.869Z

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