Firefox : md-tooltip don't display on a md-list-item

[mpicciolli]

Hello,

On Firefox, md-icon tooltip don't display when it's placed on a md-list-item element

Codepen : http://codepen.io/mpicciolli/pen/QNBMqg

angularjs/1.4.8
angular-material/v1.0.5

Any idea why this doesn't work?

[scriptsure]

Ditto on chrome +1

[devversion]

Tracking with #8946.

Fer22f commented:

However, 1.1.0 fixes the href/ng-click disparity, and breaks md-tooltip. Seeing this is basically default behavior, it might make this issue a "feature request" instead. I found #8172, but it lacks information and is now stale.

[ashishpatel02]

Will it not work inside md-list-item?

[cmacdonnacha]

+1 on @ashishpatel02

Is it possible to have this inside md-list-item?

[ashishpatel02]

It Won't But i have found one workaround which can help others.

If you inspect it then you will be surprised with button inside md-list so what i have done, i have added button manually inside md-list-item without using md-list tag and added md-tooltip underneath of that. @cmacdonnacha @devversion

check below :

<md-list-item class="usercontentpad" ng-repeat="repeat with data">
    <button class="md-no-style md-button md-default-theme" ng-transclude="">
        <div class="md-list-item-inner ng-binding ng-scope">
            {{ item to display }}
        </div><div class="md-ripple-container" style=""></div>
    </button>
    <md-tooltip md-direction="right" class="large" style="position: absolute;">
            {{tooltip to display}}
    </md-tooltip>
</md-list-item>

[cmacdonnacha]

Thanks for that @ashishpatel02 . Is there anyway way to have it on the list item itself instead of the button?

[ashishpatel02]

you can replace button with anything but i'm not sure it will work or not, you can try this with codepen first for the small demo @cmacdonnacha