Tooltips are positioned too close to triggering element about ember-bootstrap HOT 10 CLOSED

What version of ember-popper-modifier and ember-modifier do you actually use?

Can you share a reproduction?

from ember-bootstrap.

Hi @jelhan, thanks for the reply!

I have created a repository that is a minimal reproduction of the issue. The behaviour is consistent with the ember-bootstrap website, which also exhibits the issue.

I have not explicitly added ember-popper-modifier or ember-modifier to my project but according to the lockfile, it has pulled the following versions:

• ember-popper-modifier: 4.1.0
• ember-modifier: 4.1.0

When running the reproduction library above with ember run start, it has the same tooltip positioning issue:

from ember-bootstrap.

Thanks a lot for providing the reproduction. Also good to know that it affects the documentation website as well. Sounds as if it is a general regression.

I'm not sure how soon I (or another maintainer) have time looking into it. If you could trace it down to a specific version, which broke it, that would be very helpful. It might be caused by a change in ember-bootstrap itself or in ember-popper-modifier.

from ember-bootstrap.

Thanks! I'm not too familiar with the interaction between these packages, so I just did some "logical" debugging.
This might give some insight. (cfg is the bootstrapVersion configured in ember-cli-build.js):

I started lowering the version of all packages and the issue stayed persistent:

I then looked up the last working state on my project and started increasing the version of all packages from there. The notable difference is, that my project still used Bootstrap 4 before we upgraded.

* = no arrows, positioning inconsistent between vertical and horizontal
** = no arrows

To summarize:

• I don't think ember-modifier or ember-popper-modifier versions have an impact here.
• Up until bootstrap<=4.6.2, the tooltips work fine when using Bootstrap 4 (but not Bootstrap 5) even with the latest version of all other (and this) library.
• Starting from bootstrap=5.0.0, the tooltip exhibit the described issue using both Bootstrap 4 and 5
• Using the latest version of bootstrap=5.3.3, the tooltip does not have an arrow when using Bootstrap 4 at all.

When I created the reproduction project, I ran ember generate ember-bootstrap, which generated me an ember-cli-build.js entry which still manually imports the styles despite this causing a deprecation warning, so I disabled importBootstrapCSS and instead added app.import('node_modules/bootstrap/dist/css/bootstrap.css'); but this does not seem to have any impact.

To summa-summarize: It looks like the issue is entirely dependent on the version of the bootstrap package. I didn't find any combination where Bootstrap 5 works properly but maybe I missed it or this issue was simply overlooked during testing as it's not very obvious at first sight.

from ember-bootstrap.

I have toyed around a little with the docs app. I'm not yet sure how it is supposed to work, but we seem to configure a [0,0] offset to ember-popper-modifier, which does not take the arrow into consideration.
I still need to test this behavior using bs-4, but manually setting the offset in ember-bootstrap/addon/components/bs-contextual-help/element.js does help.

from ember-bootstrap.

We may want to have a look which options Bootstrap provides to Popper for the tooltip. I feel porting over what Bootstrap does is the safest option in such cases.

from ember-bootstrap.

Upon reading the discussion in Discord, I double-checked the test setup and noticed I forgot to remove the caret (^) in the Bootstrap version in the tests above.

When pinning bootstrap to an exact version, I get the following results:
(Still using ember-modifier=4.1.0, ember-popper-modifier=4.1.0, ember-bootstrap=6.2.0, cfg=5)

So the regression happened with the 5.3.0-alpha3 release of the bootstrap package.

Now this is really just an (un)educated guess but I quickly looked over the changes and this commit seems to change the default offset.

from ember-bootstrap.

This has been addressed in #2119.
Should we create a new release specifically for this bugfix?

from ember-bootstrap.

Thanks a lot for fixing. I can quickly release it.

from ember-bootstrap.

Released as v6.3.0.

from ember-bootstrap.