[Tooltip] Tooltip does not position correctly with long message

[impankratov]

Bug, feature request, or proposal:

bug

What is the expected behavior?

Tooltip should be positioned to the left of the md-fab button

What is the current behavior?

Tooltip overlaps the fab button:

What are the steps to reproduce?

Tried to create fixed md-fab button in the right bottom corner:
https://plnkr.co/edit/gkr0cO

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

Is there anything else we should know?

If I change mdTooltipPosition="left" to mdTooltipPosition="above" - tooltips will be positioned correctly.
Shorter tooltip messages are working correctly.

[Goodwine]

I had to add a css rule that sets a max width to the tooltip text and makes it break into several lines, it worked really well but it's fragile and may not work for you :(

[impankratov]

@Goodwine sounds interesting, maybe we can use this to make a PR? Can you share the code?

[Goodwine]

I don't think the CSS changes would work for everyone, it's very hacky. In fact, per the material guide, the tooltip shouldn't be that long to begin with.

If you really want to do this hack, you could update your stylesheets and set custom rules on .mat-tooltip like a max-width that works for you and whether you want to show an ellipsis on the text, or reset height so that it can grow vertically.

Again, those things go against the material guide, so be mindful of that.

[kpaxton]

This is related to #2671 and I just commented on that one that this doesn't work. The tooltip already has a max-width property set based on the outcome of that ticket. It needs to perform the way the MatMenu does and reposition itself.

[jelbourn]

I tried this with the latest version and AFAICT the behavior seems correct, seems to have been fixed since this issue was reported
https://stackblitz.com/edit/angular-xp2yxk?file=src%2Fapp%2Ftooltip-auto-hide-example.html

[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.}