Tooltip on label immediately closing in iOS 14 Safari and Chrome

[penfold]

Please remember, the issues forum is NOT for support requests. It is for bugs and feature requests only.
Please read https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CONTRIBUTING.md and search
existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.

Bug description:

Adding a tooltip to the label of an input doesn't work on iOS 14 Safari.

When the label is touched, the tooltip momentarily appears before it is hidden. Then no other tooltips on the page then will open.

There is no issue with Chrome on Android 10.

Link to minimally-working StackBlitz that reproduces the issue:

https://angular-bvaa3d.stackblitz.io

You can fork a StackBlitz from one of our demos and use it as a starting point.

Please note that we can not act on bug reports without a minimal reproduction scenario in a StackBlitz. Here is why:
https://github.com/ng-bootstrap/ng-bootstrap#you-think-youve-found-a-bug

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 10

ng-bootstrap: 8

Bootstrap: (see stackblitz)

[maxokorokov]

I'm not sure what you expect here.

• you should use <button type="button">, not the div. Everything works fine there.
• for the label, there is no "hover" on mobile. Clicking the label should focus the related input. What would you expect in this case?

FYI, as a workaround you can always trigger tooltips manually whenever necessary → https://ng-bootstrap.github.io/#/components/tooltip/examples#triggers

[maxokorokov]

I think I see what you mean actually for the label. After clicking the label it should focus the input and keep the tooltip open, right?

It works fine if you put triggers="click" for the label. There must be some timing issue with focus, because default triggers value is 'hover focus'

[penfold]

Yes, you are spot one. There is a timing issue.

It looks to be a wider issue that also affects Windows touch in Chrome.

For now we're are using media queries to check if the primary input type is touch and swap the trigger to click from hover.

[Crocsx]

I think the tooltips behavior are not working as expected in this library:
Navigate to thoses exemples pages from both official Bootstrap and official ng-bootstrap using Android or IOS

bootstrap tooltip
=> https://getbootstrap.com/docs/4.0/components/tooltips/

ng-bootstrap tooltip
=> https://ng-bootstrap.github.io/#/components/tooltip/examples#triggers

Using the default behavior exemple :

DESKTOP

bootstrap :
hover in => show tooltip,
hover out => hide tooltip
OK

ng-bootstrap :
hover in => show tooltip,
hover out => hide tooltip
OK

IOS

bootstrap :
click => show tooltip,
next clicks => tooltip stay visible
unfocus => hide tooltip
OK

ng-bootstrap :
click => show and directly hide tooltip,
next clicks => nothing
unfocus => nothing
NOT OK

Android

bootstrap :
click => show tooltip,
next clicks => tooltip stay visible
unfocus => hide tooltip
OK

ng-bootstrap :
click => show tooltip,
next clicks => hide tooltip and don't show again
unfocus => nothing
NOT OK

I believe the bootstrap behavior is the correct one, I shouldn't need to setup manual inputs to have the default behavior of native bootstrap. Also, I might be wrong here, but with manual triggers I can't set a trigger depending on the viewport (click on sm and hover on lg)