likely because of hyphens: auto; in sass.

Problem can be seen in pie chart:

Expected behavior and actual behavior:

Expected: Popover position should be in the same relative position regardless of scroll location of page.
Actual: Popover position is offset by the same amount of the scroll offset (see screen shot)

Steps to reproduce the problem:

Simply use your demo (https://www.predix-ui.com/#/elements/px-popover), and scroll down a bit, then click the "Click here" button.

Environment (component version number, Browser (including version), operating system, hardware, etc):

v.2.0.3 (2.0.4?)
Chrome 61
Mac El Capitan

Screenshots (optional, but very helpful):

Can you please add two attributes to enable customization of the div with id="popover":

1. background
2. box-shadow

I know you already expose background-color; if you expose the "background" shorthand, I can easily set all the background attributes. Specifically, I need to be able to use a linear-gradient on the background as well as setting things like repeat, position, etc.
Thanks!

Currently, when I have a popover with orientation "top," there can be some display issues when the popover is near the top of the window. Like so:

Normal popover:

When it's toward the top of the screen:

When I use the "auto" orientation, it can cause the popover to cover up information or show up in undesired places:

It would be neat if we could specify a desired orientation, "top" in this case. But have it fall back to "auto" or "bottom" if opening at the top would cause overflow or a really small popover in general.

Expected behavior and actual behavior:

When clicking on the button in the demo for px-popover, I expected the popover to be directly adjacent to the button. Instead, it's appearing far away on the screen, per this screenshot:

This is also the case when I scroll down on the page and click on the button again:

Steps to reproduce the problem:

Click the "Click here" button in the demo.

Environment:

Using Google Chrome for px-popover v2.0.3.

Expected behavior and actual behavior:

Upgraded to the latest release (2.2.3) and noticed the popover location is broken - the popover appears in the top left-hand corner of the page. I noticed this in the px-login component. As of 2.1.3 the popover location is correct. I tested 2.1.3 (working), 2.2.0 (broken), 2.2.3 (broken).

Steps to reproduce the problem:

Place the popover (or px-login which uses popover) on a web page and and click it. The popover shows up in the top left-hand side corner.

Environment (component version number, Browser (including version), operating system, hardware, etc):

=2.2.0
chrome: 64.0.3282.167 (64 bit)
windows 7

Screenshots (optional, but very helpful):

Working(2.1.3)

Broken:

Expected behavior and actual behavior:

px-popover content not rendered when enhanced = true.

Steps to reproduce the problem:

See codepen: https://codepen.io/anon/pen/pwpypz

Environment (component version number, Browser (including version), operating system, hardware, etc):

Chrome Version 58.0.3029.110 on Mac

Expected behavior and actual behavior:

Expected: with enhance="true" should render custom html inside of popover

Actual: enhance="true" shows an empty popover when popover used within a table

Steps to reproduce the problem:

Use a px-popover component inside of an html table with enhance="true" and light-dom content to be applied.

Environment (component version number, Browser (including version), operating system, hardware, etc):

px-popover v1.7.3
Chrome Version 55.0.2883.95 (64-bit)
OSX
Polymer v1.7.0

Screenshots (optional, but very helpful):

Expected (used outside table):

Actual (used inside table):

The README title refers to Px-Slider rather than Px-Popover

Expected behavior and actual behavior:

Popover should open even if the click event target is a child element of the trigger element.

Steps to reproduce the problem:

See codepen: https://codepen.io/anon/pen/pwpypz
Clicking on the child element (red) will not open popover.

Environment (component version number, Browser (including version), operating system, hardware, etc):

Chrome v.59.0.3071.115 on Mac

Can't use "enhanced" attribute of px-popover with Polymer 2.x since popover uses <content> tag instead of <slot> tag.

Couple of thoughts:

• BEM-up class names.
• Consider dropping out normalize.scss in favour of targeted reset just for this component (div and h5 off the top of my head).

CC/ @Menkhaus-ge

How to reproduce.

https://github.com/PredixDev/px-popover/blob/master/demo/px-popover-demo.html

Just change Line:39 to the below snippet.

<px-icon id="{{props.for.value}}" icon="px-utl:help"></px-icon>

possibly by using iron-dropdown

This element does not include a content tag for wrapping HTML as the popovers content.

Expected behavior and actual behavior:

Expected:
Popover responds to mouse clicks and finger taps.

Actual:
Popover responds to taps only.

Steps to reproduce the problem:

Try to use the popover on a laptop with a touch screen. Tapping the screen works as expected but using the mouse doesn't work.

Environment

px-popover version ^1.7.3
Chrome 57.0.2987.133
Windows10

Code examples

Based on a cursory look it seems like the trouble is here in px-popover.html:

hideOverlayChanged: function(hideOverlay) {
	var tapEvent = ('ontouchstart' in window) ? 'tap' : 'click';
    (hideOverlay === true) {
		document.addEventListener(tapEvent, this._onCaptureClick.bind(this), true);
		} 
		else {
            document.removeEventListener(tapEvent, this._onCaptureClick.bind(this));
          }
	}

Possible to change to respond to click and tap as opposed to one or the other?

When hideOverlay is true, popover is hiding on click of any element inside the popover.