Why doesn't the md tooltip apply to the md dummy tab

Question

I use angular material.

When I create my own directive and add it to the md-tab label like

<md-tab-label> <custom-directive> Label </cutom-directive> </md-tab-label> 

Then the custom directive is also applied to some md-dummy-tab.

But if I pass mdtooltop to the md-tab label, for example

 <md-tab-label> Label <md-tooltip>Label</md-tooltip> </md-tab-label> 

then there is no md-tooltip applied to the md-dummy-tab class

I tried to search inside the mdtooltip code but could not get any hint.

https://github.com/angular/material/blob/master/src/components/tooltip/tooltip.js

How can I do the same for my custom directive, i.e. the custom directive should not be applied to the md dummy tab?

Answer 1

<md-tooltip> not added to <md-dummy-tab> because it does not display HTML code inside <md-tab-label> . Its template is added to the nearest parent <md-content> at the time the tooltip starts.

  scope.$watch('visible', function (isVisible) { if (isVisible) showTooltip(); else hideTooltip(); }); 

-

 function showTooltip() { // Insert the element before positioning it, so we can get the position // and check if we should display it tooltipParent.append(element); // Check if we should display it or not. // This handles hide-* and show-* along with any user defined css if ( hasComputedStyleValue('display','none') ) { scope.visible = false; element.detach(); return; } positionTooltip(); angular.forEach([element, background, content], function (element) { $animate.addClass(element, 'md-show'); }); } 

-

 current = getNearestContentElement(), tooltipParent = angular.element(current || document.body) 

-

  function getNearestContentElement () { var current = element.parent()[0]; // Look for the nearest parent md-content, stopping at the rootElement. while (current && current !== $rootElement[0] && current !== document.body) { current = current.parentNode; } return current; }