PolymerElements/paper-tabs

paper-tab doesn't work with paper-tooltip

malthusyau opened this issue · 1 comments

malthusyau commented

Description

2 issues

  1. paper-tooltip does not show up when targeted for a paper-tab
  2. paper-tab's disable property sets pointer-event to none, which disables hover.

Expected outcome

  1. paper-tooltip should show up when hovered over the targeted paper-tab
  2. disabling the paper-tab should only disable the clicking/selection, but not hover.

Actual outcome

see demo

Live Demo

https://jsbin.com/xecodotazo/1/edit?html,output

Steps to reproduce

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10
bicknellr commented

paper-tabs has overflow: hidden; because your tabs might scroll. You can work around this by placing your tooltip outside of the tabs: https://jsbin.com/cizacan/edit?html,output. This looks like more evidence in favor of #173.

The reason for your second issue is the IronControlState behavior uses pointer-events: none; to disable the element, which also prevents the events that paper-tooltip listens for to decide when to show. I think this portion of the issue might be considered an issue there, since it's not specific to paper-tab(s): https://jsbin.com/tafuraq/edit?html,output.

  • 👍1