list: md-tooltip doesn't work within a clickable md-list-item

[ferk6a]

Actual Behavior:

• What is the issue? md-tooltip doesn't appear when md-list-item is one that can be clicked.
• What is the expected behavior? That it should appear.

CodePen (or steps to reproduce the issue):

• CodePen Demo which shows your issue: http://codepen.io/anon/pen/VjWWyw
• Details: The first is using ng-click and the second, href.

Angular Versions:

• Angular Version: 1.4.8
• Angular Material Version: 1.1.0-rc.5

Additional Information:

• Browser Type: Firefox
• Browser Version: 47
• OS: Windows 8.1

---

I was using 1.0.9 angular-material with href links and the css was broken (and I fixed it with custom CSS), but the md-tooltip feature worked (as shown in the second md-list-item: http://codepen.io/anon/pen/NAggwg).

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.

[crisbeto]

@Fer22f Your example doesn't work, because there's a transparent button overlay on top of the list item. This is necessary for proper accessibility and cross-browser compatibility. Working around this in Material might not be appropriate, however fixing it on your side should be pretty simple: you just need to add a z-index to the text. Here's a forked codepen.

[devversion]

As @crisbeto said correctly, this is not something we can fix in Angular Material.

The workaround from Kristiyan is a valid one and can be used to fix that issue in the future.

.my-tooltip-parent {
  position: relative;
  z-index: 1;
}

[ferk6a]

Thanks for the tip! I was looking for a workaround and didn't find any, thanks.

[naveenjafer]

@Fer22f how did you fix this issue? I have a similar md-tooltip inside a md-list item and I am unable to get it to work.

[naveenjafer]

@crisbeto the plunker that you attached, does it have a working md-tooltip implementation? Cause I am unable to see any tooltip.

[crisbeto]

You're supposed to hover on the timestamp that's on the right of the list item @naveenjafer.

[naveenjafer]

`

                  <img class="md-avatar" src={{event.url}} style="width:80px;height:80px"></img>
                  <div class="md-list-item-text" layout="column">
                  <h3 style=color:rgba(0,101,160,0.9)><b>{{event.begin}}</b></h3>
                  <p>Vehicle - {{event.car}}</p>
                  <p>{{'DISTANCE' | translate}} - {{event.distance}} Km</p>
                </div>
                <md-tooltip class="trackpreview" md-direction="left">
                <md-content >
                <img src={{event.url}} style="width:480px;height:380px"></img>
                </md-content>
              </md-tooltip>
                </md-list-item>`

I have this tooltip inside the list item. It is working as expected in chrome and safari, but doesnt work with firefox. I also tried the parent and z-index approach that you mentioned earlier, does not work though. And actually by putting this md-tooltip on a span parent, my tooltip stops working across all browsers(even the normal tooltip with just a simple text). Any ideas?

[ferk6a]

@naveenjafer

1. You should note that md-content should, in general, should not be nested, they are scrollable elements.
2. The z-index: 1 should be put in the element you want to have a tooltip. The md-tooltip also receiving the z-index: 1 is a side-effect; here is an example based on yours with some broken images, I use tags to encapsulate the img element, and group it with the md-tooltip.
3. I don't know exactly what you're trying to accomplish with the md-tooltip in the example you showed, it seems you want to put a tooltip in everything? Please make it clear.

For anyone trying this, keep the note that since it's z-index: 1, it's not clickable anymore. You need to add a new ng-click (or ui-sref in my case), to each of the individual affected elements, and you also lose the "focus" color change. This is why I said it's a workaround because it's not exactly inheriting all the events from the parent, but instead, overriding them in a manner that makes sense.

[naveenjafer]

@Fer22f Yeah I wanted to put a tooltip in all contents of the item in the list(but for this case lets assume I want to put it only on the image). Thank you for the example, it works exactly as expected in the codepen across all browsers, but for some reason in the actual implementation that I have running, the preview still works only on chrome and safari, and the surprising part is where clicking on the image is still resulting in a click event on the list. This seems to be completely unexpected behaviour. I have spent hours pointlessly checking for anything that might be different in my environment. Which material version do you recommend that I use?

[ferk6a]

I'm using 1.0-rc.5 currently, but I don't have any recommendation, since I tried rc4 before and there were some other things that were broken, rc5 being the first usable version I came across.

I suspect it's working because you have a "md-avatar" class in the img (like in the "Avatar with Secondary Action" section), which associates the ng-click to the avatar by default. However, I'm using an md-icon and regular text, which probably doesn't bind the ng-click by default. That is all a suspicion, of course.

About the preview only working in Chrome and Safari, that's odd, I use Firefox myself, but I never had to embed the tooltip into the entire item, so I didn't find any friction in that respect.

[naveenjafer]

@Fer22f no luck with icon elements either, it is just really suspicious that it is all working fine in the plunkr(with the avatar and everything) but the very same thing just doesnt work properly in a deployment of mine. If I do find out what the issue is, I will keep you posted :) Thank you for the help :)