Paper-tooltip not visible in iron-list due to different stacking context

[agthenbo]

Description

paper-tooltip is not visible for elements in an iron-list

Expected outcome

paper-tooltip appears above sibling stacking contexts

Actual outcome

paper-tooltip invisible below sibling stacking contexts

Live Demo

https://jsfiddle.net/pt6crtfb/3/

Steps to reproduce

1. Put an iron-list element in the page and associate multiple items.
2. Add an element with an opaque background and a corresponding paper-tooltip to the iron-list/template
3. Open the browser and hover over the first element in the iron-list to show the tooltip
4. Change the CSS to set the element background transparent
5. Repeat step 3

Browsers Affected

• Chrome
• Firefox
• [?] Safari 9
• [?] Safari 8
• [?] Safari 7
• [?] Edge
• IE 11
• [?] IE 10

To resolve the issue locally, I've experimented with moving the paper-tooltip element or its inner div to ownerDocument.body or an appropriate surrogate parent element and adjusting the position in updatePosition, then moving it back in _onAnimationFinish - with no success, as the tree can not be changed without breaking styles and event listeners. Another attempt, forcing higher z-index of all stacking context root ancestors, also causes ugly artifacts and breaks carefully layered pages.

[antwonthegreat]

Any updates on this issue?

[dominik0711]

Would be great to be able to use paper-tooltip for list entries!

[ghost]

any news about this issue?

[jpicus]

Same issue here...
But i guess all hope is lost...

[jpicus]

Solution that solved : but a z-index=1 on component displayed when the mouse is on that composant

     ligne-liste:hover{
     z-index:1;
      }