Tooltips do not render correctly on external display (Chrome+Win10)

Hi Bubblers,

I want to summarize an issue that’s been plaguing me and now has a home in Bubble’s bug list (although not a fix yet, as it may not even be an issue with Bubble per se). Maybe some of you have also had this.

Basically, I’m seeing tooltips being weirdly offset from their parent element when the browser in question is up-to-date Chrome (or Edge) on a Windows 10 laptop with an external display. Works just fine in on the native display. This issue did NOT happen on a Mac with Chrome (didn’t test anything else), or Windows using Firefox or IE (lol). If that sounds very exotic, you’re probably right, but it’s still damned frustrating when you don’t know what’s causing it!

I originally posted about the issue here: Position: Float causing issues with tooltips

I’ve posted the same screenshot here so you can see what the issue looks like.

Below I’m pasting a thread from the Bubble support team with additional info, who were really helpful given that this is not burning down the house for me. I’m sure they have much bigger fish to fry. Thanks team! Apologies in advance for janky formatting below.


On September 30, 2020, 5:42 PM EDT Mathew wrote:

Hi Jeff,

I tested a bit more and found a few things: first, it still happens with Chrome on my Windows laptop ; but Chrome on a Mac did not have any issues.

Then I tried clearing cache and cookies, restarting the laptop, etc. None of these resolved the issue on my original laptop.

After a bit more trial and error, I found that it works fine on my laptop in its original display; but when I move the page to an external display , then tooltips break. So I guess there is some kind of rendering issue on the external display. I don’t know if that is a Chrome issue, or some kind of janky hardware interface issue.

You might be able to reproduce if you tried it on a windows laptop on an external monitor; but it may also be hardware specific in some way.

As an aside – your bug form reported my OS as “Chrome ()” when I definitely selected Windows as my OS; is it possible the bug report form is reporting the wrong radio button field for the OS ?

On Wed, Sep 30, 2020 at 1:12 PM Jeff Thill <[email protected]> wrote:

Hello,

Thanks for reaching out; we’re sorry to hear that you’re having trouble with native tooltips! I have just tested the behavior you are reporting, and am not able to reproduce it: please take a look at my test video => https://www.loom.com/share/26ccf4b00a03431586948c8eaea9cc46

Is there anything I am missing here or were you able to find a solution?

Please do let me know if this behavior is persisting for you or if there are any additional reproduction steps that I am missing.

How would you rate my reply?

Jeff Thill

Bubble Support

[email protected]

On September 29, 2020, 8:40 PM EDT [email protected] wrote:

Issue when the user is build an app
Priority: Causes issues in production app

Mode: Run mode

OS: Chrome ()

Browser: Chrome ()

Symptoms:
The native tooltip feature of most elements (i.e., all that I tested) has the tooltip text offset by 200-500+ px from the expected immediate lower right of pointer position. The offset is unpredictable and happens seemingly in every context, not only in a group or repeating group, and for me always up and to the left. I see the issue in both dev and live.

  • In my current test at 9/29/20 5:24 PM Pacific Time, it does NOT work on up-to-date Chrome (Version 85.0.4183.121 (Official Build) (64-bit)) or Edge browsers. But…
    ** It DOES work on Firefox 80+ and IE 11.1082.18362.0. Sorry I don’t have more browsers to test.

  • I did test in Safe Mode – did not resolve issues. (Aside: I recommend somebody repost [New Feature] Safe mode preview to the forum, I’d never heard of Safe Mode before reading the reference at the bottom of the bug report form; I’ve been using bubble actively for years but don’t read all the traffic in the forum.)

This is not burning down the house for me but, unless this is an exotic issue that somehow only I experience, it’s going to be very annoying for anybody using tooltips.

Step-by-step instructions:
Just go to the sample page here:

In Chrome, mouse over any of the “Test X” elements. You should see the corresponding tooltip text offset by a ways. See screenshot below. Sometimes offset is so big it’s off the screen, making it look like the tooltip isn’t working at all.

Error code:

Screnshots:
https://s3.amazonaws.com/appforest_uf/f1601425825029x416974890066168260/Capture.PNG / https:

This topic was automatically closed after 14 days. New replies are no longer allowed.