md-tooltip not working inside disabled md-tab

[and1gio]

<md-tab id="tab2" aria-controls="tab2-content" ng-disabled="true">
      Some Title
      <md-tooltip>
            This Feature is not available yet
      </md-tooltip>
</md-tab>

the tooltip is disabled too and don't works on hover.

[yanivefraim]

After a little investigation of this issue, there seems to be two issues here:

1. When rendering the tooltip, the tab does not get the 'pointer-events: none', yet. This means that while debugging with this line of code (inside tooltip's code)
   while ($window.getComputedStyle(parent[0])['pointer-events'] == 'none')
   it wasn't true, although it was supposed to be. I guess this is related somehow to Angular's rendering order (ng-disabled is executing after tabs directive. If I change ng-disabled to disabled="{{exp}}" this problem is fixed. But, this does not work on old i.e browsers). This JSBin demonstrates the problem: http://jsbin.com/birusemela/2/edit?html,css,js,console,output

2. After hard-coding 'pointer-events: none;' on the tab element, just in order to debug this, I see that this code section

   while ($window.getComputedStyle(parent[0])['pointer-events'] == 'none') { parent = parent.parent(); }

will have 'parent' as the 'md-header-items' element (in my test). This is not good as a tooltip's parent and will not work. I guess the 'quick and dirty' solution in this case will be to wrap the '' element in case it is disabled in html element (div?), which will have 'pointer-events: auto'. In this case the tooltip will work. The better solution will be to refactor this code section to work better.

Is it possible to contribute here? I was reading earlier that you are not ready for contributing. I am willing to contribute to this awesome project, but I'm not sure that I'm not waisting my time here.... (:

[gbruins]

Same issue with md-button. If disabled, then tooltips do not display.

[yanivefraim]

Hey,

1. I succeeded to solve the first issue (see my first comment describing the causes above) by applying this solution http://stackoverflow.com/questions/28787241/angularjs-ng-disabled-execution-order-on-a-directive.
   I'm not sure it is acceptable to wrap the code with $timeout.
2. The second issue is caused by the wrong search for tooltip's parent. There are actually two tooltip parent elements here. Both are wrong:
   a. 'tooltipParent' variable, which is responsible for appending the tooltip to. This element is based on 'md-content' element or 'body'. Both are not good as tooltip location...
   b. 'parent' which is responsible for mouse/touch event listeners. This element is based on the first element with 'pointer-events' != 'none'. This is a wrong choice as well. For example, in the tabs, this element is the tabs directives, which will trigger the tooltip for all tab elements (instead of only the desired one)

I'm not sure how exactly this (section 2) can be solved without a massive code refactoring. I have no idea who can I talk to here to get advises, and I would love to contribute and fix this issue (already invested several hours in this issue)

[dohomi]

+1 for making tooltips available inside of ng-disabled. I think its a common case that user wants to disable a button and the tooltip states why the action is not available (yet). I solved it with wrapping the button inside of a span but it might be clean if the tooltip would be available.

[SergeyBukhman]

+1. Tooltip on a disabled control is actually important to communicate why it's disabled

[houmark]

+1 for making tooltips available on disabled elements.