<div class="container">
  <div id="target" onclick="changeVisibility()">
      Click Me!
  </div>
</div>
<polymer-popover for="target" placement="top" header="this is the popover header" content="This is the popover content" type="danger">
</polymer-popover>
<polymer-popover for="target" placement="left" header="this is the popover header" content="This is the popover content" type="primary">
</polymer-popover>
<style>
  .container {
    overflow: scroll;
    width: 1000px;
    padding-left: 300px;
    padding-top: 200px;
    padding-bottom: 500px;
  }
  #target {
    width: 100px;
    height: 70px;
    background-color: white; 
    color: black; 
    border: 2px solid #337ab7;
    border-radius: 4px;
    text-align: center;
    line-height: 70px;
    cursor: pointer;
  }
  #target:hover {
    background-color: #337ab7;
    color: white;
  }
</style>
<script>
    function changeVisibility(hidden) {
      const popovers = document.querySelectorAll(`[for=target]`);
      popovers.forEach(
        (popover) => { popover.hidden = !popover.hidden; });
    }
</script>