tooltip: don't work on buttons in a md-fab-toolbar

[Alexandre-io]

All tooltips are opened on the same location when mouse is over the fab-toolbar. Example: http://codepen.io/anon/pen/pjrLog

[ThomasBurleson]

• If the toolbar icons have tooltips then tip shows even if the toolbar is closed - http://codepen.io/team/AngularMaterial/pen/QjxQGW

[SanderElias]

Duplicate/variation of #4445

[ishankhare07]

@SanderElias the issue with the fab-speed-dial is solved but not with fab-toolbar -> http://codepen.io/ishankhare07/pen/dMpjXP?editors=1010 the position issue has still not fixed also i'd like to mention that using ng-if only affects the visibility, but DOES NOT fix the position

[nicooga]

Is there a workaround for this?

[topherfangio]

@ishankhare07 @nicooga You are correct, this was not fixed with the speed dial fixes. Re-opening and assigning to myself.

[rahulvc01]

+1

[harvellm]

+1

[adibas03]

+1

[leandroruel]

+1

[Volodymyr-Mishyn]

+1

[charlieargue]

+1

[Gisonrg]

+1 doesn't work on iOS both Chrome and Safari

[WanManolo]

+1

[ryanzola]

+1

[patoncrispy]

Yeah would be pretty nice to see this fixed. My toolbar is very 'wordy' and would be great to use icons+tooltips instead.

[johnrix]

+1

One simple (but ugly) workaround is to just use the 'title' attribute on <md-button> instead of using md-tooltip

[Rahul-Sagore]

I have a way to fix it. But it is not perfect solution. After checking the Angular-Material's code I found that the tooltip gets initialised based on parent's pointer-events css properties, which makes sure the parent has pointer events and not set to none.

I was having the same problem, So I fixed it by adding pointer events to the menu's icon and removing it after the page has loaded. Codepen Link

Steps to fix:

1) Add this css code into your css file (Make sure it override existing css)

md-fab-toolbar md-toolbar.pevents__initial {
      pointer-events: initial;
}

2) Add pevents__initial class to the md-toolbar element, which is inside md-fab-toolbar:

    <md-toolbar class='pevents__initial'>
        <md-fab-actions class="md-toolbar-tools">
        </md-fab-actions>
    </md-toolbar>

3) Add this javascript code to remove pevents__initial class from your above code :

setTimeout(function() {
   $('.pevents__initial').removeClass('pevents__initial');
}, 1000);

This is just a hack to make tooltip work inside fab toolbar. Need to read the official code more to find more better solution. But this works for me right now.

[Splaktar]

I updated a similar CodePen from #7380 to AngularJS Material 1.2.2 and this issue is still there.