md-tooltip positioning incorrectly when direction is changed

[tyrdavis]

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.

[eqbalsajadi]

• 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

[zehavibarak]

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.

[EdoMagen]

+1

[mohammadkhoeini]

+1

[AmirRaptoR]

+1

[EdoMagen]

Ok so we ended up building our own.

[oliversalzburg]

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

[eladh]

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';

[eqbalsajadi]

@eladh hi,

I'm moving to material2 right now
hope to not have such probs in material2

[oliversalzburg]

hope to not have such probs in material2

#goodluckwiththat ;D

[eqbalsajadi]

@oliversalzburg Thanks

[mahmoudajawad]

Are we seeing this bug taken into consideration?