<div class="wrapper">

<div class="spacer"><h1>Scroll down, the instructions are in the popover. Bug ONLY occurs in Chrome</h1></div>

<button class="btn1" popovertarget="popover1">

click me

</button>

<div popover="auto" id="popover1">

<p>Popover1</p>

<button class="btn2" popoverTarget="popover2">

click me too

</button>

<div popover="auto" id="popover2">

<p>Popover 2</p>

<p>Hover the button below. Notice it won't trigger. For it to trigger, you need to move your mouse over the button,

then move UP on the Y axis (so make sure the X would still be over the button too).

It could be you need to scroll slightly back up to find the target.

</p>

<p>If you would remove the spacer at the top of the page (and thus the popover wouldn't require scroll), the hover would work straigth away.</p>

<button class="hover-btn">Hover this button</button>

</div>

</div>

<div class="spacer"></div>

<script src="index.js"></script>