Position: Float causing issues with tooltips

Has anyone experienced an issue with a floating group (or any group with CSS properties of position: float) interfering with tooltips? I’ve tried both the AirTooltip plugin and other plugins on the store, they seem to break when using this CSS property for the group holding the tooltip triggers. See below:

Here is it with no float CSS and working perfectly:

And here is it with the floating CSS for the sidebar that the icons sit in:

Any idea why this is and what I can do to fix?

Any ideas @emmanuel @eve

I can log a bug report but I’m guessing i’ll be redirected back here.


Hard to say if it’s related, but I’m also having problems with tooltip positioning – not with any plugin, but the native element tooltip. In the past, they worked fine in my app. Lately, they are 200-500px offset from their parent element (generally up and to the left), with no rhyme or reason. The problem is across the board as far as I can tell, with and without groups, although my sample below shows only button and text elements – I haven’t tested all of them.

I have a super simple test page here that shows the behavior on my browser, which is Chrome and up to date:

Of note, the very first time I created & tested the page, the tooltips worked fine. The next time I made any update to the page, they broke, stayed broken.

Below the text I posted to a bug report, which contains additional detail, in case you suspect the issue is impacting your app. Thanks in advance to the Bubble support team, I know you guys have a lot of cases to triage and, since it is a browser-specific (or browser-version-specific?) issue, it’s very likely not a simple bug you can fix just like that.

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.

Please note: when I built the test page above, it worked correctly ON THE FIRST BUILD. After making an update (to add elements inside a group), all the test tooltips broke.

  • 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.

For several reasons, I didn’t like the built-in tooltips and used the Tippy library instead. It lets you specify fallback placements when the placement+window size doesn’t allow for the default placement. See my reply here for details: Custom Tooltip Hover - #4 by shawnmollen