bootstrap

bootstrap copied to clipboard

When doing exactly what is described below, this happens 95% of the time. However I noticed sometimes there are periods where it doesn't happen 10x in a row.

This happens even on the bootstrap example itself: https://ng-bootstrap.github.io/#/components/popover/examples

This only happens when entering slowly with the cursor at the red marked line here:

This also only happens if the movement of the cursor is slow.

It is especially problematic with small buttons, as the popover-caret size is absolute and thus takes up a bigger percent of the button-edge.

Also you can see the cursor quickly switching between default and pointer around 100 times per second when exactly over the red line. This is likely a byproduct of the bug.

Yeah, there seems to be an issue.

I see the gif, but I cannot replicate it in windows & linux (chrome, brave, firefox) . Can you provide more details?

I think it's not a big deal. It's only happening when the mouse enters so slowly.

I see the gif, but I cannot replicate it in windows & linux (chrome, brave, firefox) . Can you provide more details?

Yes I guess it doesn't happen on all devices. I tried it on my work laptop with chrome and it happened but now on my personal (newer/better) one it doesn't happen.

My work laptop is a think pad.

I think it's not a big deal. It's only happening when the mouse enters so slowly.

Cleary this doesn't happen 95% of the time on your setup (but it did on the bootstrap wesbite using my work laptop).

This does happen like 80% of the time on my application actually, and this even without going "unrealistically" slow, just normal user speed slow.

I think a lot of factors influence it. I think it might especially happen more often when the size of the button is small in absolute terms (that is, like 1/4 of the width of the button of the gif you posted).

The bug only appears when entering the button from the side where the popup should appear, nevertheless this can be any side (top/bottom/left/right).

This is especially problematic when the direction from which users most of the time stir towards the button is the side on which the popup appears, which is the case for my website.

https://user-images.githubusercontent.com/81622754/183369196-6e542772-1ef2-471e-91dc-fa0c5ab25b63.MOV This is what it looks like in my application. As you can see it only appears twice when trying like 15-20 times.

(Sry no screen record/gif cause no ShareX cause work laptop)

same issue after update [email protected] to [email protected]

same issue after update [email protected] to [email protected]

How exactly is this the same issue? Should the popover/tooltip appear on top of the caret you circled but it doesn‘t? Where is the mouse cursor, from where did you enter etc. from the picture you sent not much can be related for me.

Is there any chance of this getting fixed soon or rather not?

Can I provide any additional information for you to be able to fix this?

@GeoSot I see the gif, but I cannot replicate it in windows & linux (chrome, brave, firefox) . Can you provide more details?

What details exactly would be helpful to solve this? I will try listing some:

We are using ng-bootstrap for our application. But as @Nudasoft commented it also happens on the general boostrap tooltip-page.

I am eager to help solving this, can also use discord if this helps to provide more information or better explain the problem scenario.

Fixed on bootstrap website

Was this fixed by adding this gap between the element and the tooltip/popover-caret-arrow? (was it added just on the website or from the library?)

I think this can be closed more or less.

This is how it previously looked without the gap:

So anyone still looking for a fix: you need at least 4px gap between the tooltip and the hover-area that triggers the tooltip. This gap is 0 by default in boostrap.

To get it, just do this:

::ng-deep ngb-popover-window {
  top: 4px !important;
}
// note: you need both ::ng-deep AND !important here

Note that this will cause issues when the popover displays left/right/top of the element. For an element that isn't always opened from the bottom, use another styling, style conditionally.

@Bootstrap could set the distance of the popover/tooltip to the element 4px further by default somehow maybe, to get rid of this bug. The bug still exists in the latest version actually, if you try for a while: https://getbootstrap.com/docs/5.2/components/tooltips/

Bootstrap fixed this