md-tooltip doesn't work on firefox 38.0.5

[oscarr-reyes]

i am trying to make a button on toolbar to show a tooltip whenever the mouse hover on an icon button

<md-button class="md-icon-button" ng-href="#/cotizacion">
    <md-tooltip>Cotizacion</md-tooltip>
    <md-icon md-font-icon="fa fa-lg fa-pencil-square-o" aria-label="Cotizacion"></md-icon>
</md-button>

but it doesn nothing, even on click, i am using the lastest version 0.10.0

[xforceco]

It works, please try to follow the demo page, and ensure you have properly included angular-material.min.css, angular material icons, and angular-material.min.js

[oscarr-reyes]

@xforceco the code is the same on the demo, and even the demo doesn't work for me, only if i check "insert dive" and i'm loading all libraries but yet it doesn't work, i am using firefox browser

[xforceco]

I see you intend to use font-awesome.
Have you included it properly?

https://material.angularjs.org/latest/#/api/material.components.icon/service/$mdIconProvider

And please provide a plunker for details, as I am sure at least for:

<md-button class="md-icon-button" ng-href="#/cotizacion">
    <md-tooltip>Cotizacion</md-tooltip>
    <md-icon></md-icon>
</md-button>

the tooltip is working in my codepen

[oscarr-reyes]

@xforceco but why it doesnt work even in the demo?

[xforceco]

which demo page are you referring to?
tooltip works, but I am not sure whether your font-icon works

[oscarr-reyes]

i am still learning angular material and i have no idea how i would properly set the classes on $mdIconProvider

[oscarr-reyes]

@xforceco on the demo, when you hover the button, does the tooltip work?

[xforceco]

@Nosthertus Yes, it is a screen capture when I hover on the button, so I don't understand why you said demo not working.

[oscarr-reyes]

@xforceco because in my screen, the demo doesn't work, just when i click on "insert dive"

[sajmons]

I can confirm that in FireFox 38.0.5 hover tool-tips aren't working.

CodePen: http://codepen.io/anon/pen/RPjLzW

[Londovir]

Seems like some sort of odd Firefox issue. If you single step in Firefox, you hit a call to setVisible(true) buried in the method bindEvents for the md-tooltip. For Firefox, though, single stepping that line actually diverts you into createEventHandler/eventHandler of jqLiteOn, and eventually the method calls run out without the call to setVisible ever resolving. In fact, oddly enough, a single single-step action doesn't visibly do anything in Firefox developer tools, which is odd. I can't quite figure out what's happening with that. It's almost like that is trying to call setVisible but fails, for some reason.

In Chrome, BTW, that call to setVisible resolves instantly, and then it proceeds to the event handlers. Not sure why Firefox is getting pre-empted or ignoring the call to setVisible.

Note, though, that moving your cursor off the bound element (fab) IS triggering the setVisible(false) call properly.

[oscarr-reyes]

@Londovir so, should i wait for the developers to see if they can fix this in another updated version?

[JDGoldman]

I have the same issue with Firefox 38.0.5 on the Angular Material Demo Page for md-tooltip:

[Splaktar]

This is already reproducible in the tooltip.spec.js tests. If Karma is run with Firefox 5 of the tests fail.

1a07051 does indeed fix the tests and causes them to pass on all browsers but it just breaks the check by using block instead of none. Something like dog or cat will also cause the tests to pass ;) Just removing the check appears to cleaner.

[Luxiyalu]

For the time being, use something like this to force the display:

<md-button class="md-fab md-accent" aria-label="Play" ng-mouseenter="show=true" ng-mouseleave="show=false">
  <md-tooltip md-visible="show">
    Play Music
  </md-tooltip>
</md-button>

[danieladz]

I'm having the same issue with the tooltip also the icon in the button doesn't recognize any hover action for example color changing on hover...
@Luxiyalu I tried your way and it didn't work on firefox :(

[Splaktar]

This should be working in 0.10.1-rc3.

As for the button hover behavior, I think that most button hover styles were removed a couple releases ago since they aren't in the spec (don't work on mobile).

[gilad905]

I had the same problem (md-tooltip worked on Chrome but not on Firefox) and found out that this can be caused by placing md-tooltip as an indirect child of md-button. E.G:
<md-button id="reload-button" class="md-icon-button material-icons"> <span style="margin:auto"> refresh <md-tooltip>Reload</md-tooltip> </span> </md-button>

Instead of
<md-button id="reload-button" class="md-icon-button material-icons"> refresh <md-tooltip>Reload</md-tooltip> </md-button>

It actually makes sense that md-tooltip would be expected to be the direct child of md-button, but since in Chrome the 2nd case also works, this might be a cause for confusion among developers.

[naveenjafer]

In my case I have a Md-list element on which I am trying to create a tooltip. Works on chrome and safari but fails on firefox.

[ThomasBurleson]

We support evergreen browsers n-1; Firefox v38 is not supported.