Components: tooltip on md-tab not working

[emreavsar]

Bug, feature request, or proposal:

bug

What is the expected behavior?

tooltips should be shown on md-tabs

What is the current behavior?

tooltips are not shown

What are the steps to reproduce?

see plunkr: http://plnkr.co/edit/ij8DMEKht4QTvQt1ANLN?p=preview

• _tab 2 and tab 3 have both tooltips which are not shown_
• _general tooltips work (see on the bottom of the plunkr a working tooltip)_

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

Providing information about tabs would be nice, especially when tabs are set as disabled, a reason why it is disabled should be somehow shown to the customer.
There is already a discussion about that on angularjs and old material, so we don't have to discuss the reasons again: https://github.com/angular/material/issues/1667

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

material 1.0.0 beta 10

Is there anything else we should know?

if it is intended, what would be a good way to make the user know that this tab is disabled because of reasons (except doing nasty stuff like <md-tab label="tab2 (not enabled feature)">...</md-tab>

[benelliott]

Actually you can add tooltips to tab headers if you use the alternate tab label syntax involving ng-template: demo.

However they don't work if the tab is disabled.

[josephperrott]

Marking as resolved are you should use the ng-template method as referenced above.

[emreavsar]

@benelliott thanks for the plunkr and the workaround. As you mentioned there is still the problem with not working for disabled (which is actually my use case, where i want to tell the customer WHY it is disabled)

@josephperrott this issue is not resolved, please reopen.

[willshowell]

@emreavsar it would be due to this,

https://github.com/angular/material2/blob/3571f68a2de0833ee4741af8a0eb24d1da174f38/src/lib/tabs/_tabs-common.scss#L25-L28

IMO, it seems strange to me that the "disabled" functionality of the tabs hinges on pointer-events: none. You cannot override that CSS, because the tabs start working again, despite looking disabled.

I think the template logic surrounding matRippleDisabled and (click) should check for whether the tab is disabled

https://github.com/angular/material2/blob/3571f68a2de0833ee4741af8a0eb24d1da174f38/src/lib/tabs/tab-group.html#L6-L24

@josephperrott will you reconsider reopening this for the purpose of moving the disabled logic out of the CSS and into the MatTabGroup class?

[josephperrott]

Reopened, it definitely merits a look.

[emreavsar]

Correct me if I'm wrong but #7364 has not yet fixed this issue.

See the updated plunkr here: http://plnkr.co/edit/n4TksZD9NkM0UPHwJtZA

same behaviour.

[willshowell]

@emreavsar you still need to take into account @benelliott's suggestion. The fix in #7364 was just to allow the tooltip to work on disabled tabs.

http://plnkr.co/edit/AnswASZc5SpvFKwcrCMu?p=preview

[emreavsar]

i see and i gave you my ❤️

[angular-automatic-lock-bot[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._}