Tool tip material positioning on mobile device

[Ethan-ATG]

Bug:

After recently upgrading to Angular 6 we have noticed that the default behavior Angular material is no longer functioning as expected.

Works as expected on desktop. However, on mobile when doing a long key press the tool tip does not show in the correct place, In one situation we have managed to hack it adding a click to toggle the tooltip (which is not really ideal as its not the default behaviour). However, where there is a scrollbar the tooltip does not position right by where you click. In most instances it is positioned off screen and (if you are lucky) scrolling down brings the tooltip up and into view. However if it is lower down the tooltip does not appear.

Code to reproduce the issue:

https://github.com/ethan-gforces/material-tooltip

Screenshot showing issue in tooltip example docs

Landscape on iPhone
Portrait on iPhone

Detailed Reproduction Steps:

1. Compile code
2. Navigate to app on a mobile device
3. The first tooltip does not display on mobile but does on desktop
4. Second tooltip displays on both mobile and desktop but not using the default behaviour (long keypress)

What is the expected behavior?

With a long keypress (1.5 secs) the first tooltip will display in the correct position

What is the current behavior?

With a long keypress the first tooltip does not display in the correct position

Versions of Angular, Material and browsers are affected?

• Angular 6.1.9
• Angular material 6.4.7
• HammerJS 2.0.8
• Google chrome and Samsung internet on mobile device

[crisbeto]

The tooltip's behavior on mobile depends on the longpress gesture from Hammerjs. From what I can tell, you don't have Hammer included.

[Ethan-ATG]

You are correct @crisbeto I had not in the committed version. However I had in my local copy (now committed) I have now also embellished the details on the issue and included screenshots on the tooltip docs example to show the same thing. Only on a long page the tooltip is quite often not even visible.

[crisbeto]

The positioning issue when the page is scrolled should be fixed by #11628 in Material 7.0.

[Ethan-ATG]

Fantastic. Thank you for your prompt response 👍

[crisbeto]

Closing the issue since everything should be working as expected. I've also submitted a PR to add a fallback for pages that don't include Hammer.

[RezaRahmati]

newbee question: how can I find version a bug is fixed in github?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}