Material: md-tooltip positioning incorrectly when direction is changed

Created on 15 Feb 2017 · 14Comments · Source: angular/material

Actual Behavior:

What is the issue? * md-tooltips in 1.1.3 do not appear in the correct position when the md-direction attribute is changed, after rolling over the tooltip at least once. It appears the edge of the tooltip being used to calculate the position is determined on first roll-over of the tooltip, and not updated if the direction is changed.
What is the expected behavior? Tooltips should position themselves as they did in version 1.1.1.

CodePen (or steps to reproduce the issue): *

CodePen Demo which shows your issue: http://codepen.io/anon/pen/qRvEGw
Details: Roll over the FAB with the radio set to "bottom", then switch the direction radio button to "left". The _top_ of the tooltip is aligned with the center of the FAB instead of the center of the right edge being aligned to the center of the FAB, as expected.

Angular Versions: *

Angular Version: 1.5.5
Angular Material Version: 1.1.3

Additional Information:

Browser Type: * Chrome
Browser Version: * 55.0.2883.87
OS: * Windows 7
Stack Traces:

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

required Pull Request fixed regression bug

Source

tyrdavis

👍7

Most helpful comment

Also tooltips always appear on right corner of window for RTL (html[dir=rtl])
Angular Version: 1.6.2
Angular Material Version: 1.1.3

eqbalsajadi on 6 Mar 2017

👍9

All 14 comments

Also tooltips always appear on right corner of window for RTL (html[dir=rtl])
Angular Version: 1.6.2
Angular Material Version: 1.1.3

eqbalsajadi on 6 Mar 2017

👍9

I experience this too when html dir is set to rtl.
this is mdPanel position -related issue.
js does'nt assign 'left' as it does when dir attr is set to ltr.

zehavibarak on 9 Mar 2017

EdoMagen on 5 Apr 2017

molikh on 10 Apr 2017

AmirRaptoR on 19 Apr 2017

Ok so we ended up building our own.

EdoMagen on 24 Apr 2017

It seems to me like tooltip positioning is completely unreliable once you put multiple tooltips on the same page. We see completely misaligned tooltips on successive hover actions without changing direction.

Seems like our issue is actually #10543

oliversalzburg on 9 May 2017

👍1

hi @eqbalsajadi ,

its seems like the problem is in the _reverseXPosition() - when the position is center its return undef and that cause the tooltip to be position wrongly.
in this case this function should return the position

MdPanelPosition.prototype._reverseXPosition = function(position) {
  if (position === MdPanelPosition.xPosition.CENTER) {
    return;
  }

  var start = 'start';
  var end = 'end';

proposed solution:

MdPanelPosition.prototype._reverseXPosition = function(position) {
  if (position === MdPanelPosition.xPosition.CENTER) {
    return position;
  }
  var start = 'start';
  var end = 'end';