<template>
  <div class="demo-popover-position">
    <p>示例在右下角。</p>
    <div class="position-container">
      <div style="height:1000px;">
        滚动到底部查看内容
      </div>
      <ui-popover
        :popper-options="popperOptions"
        title="Quotes"
        trigger="hover"
        placement="auto">
        <div
          slot="content"
          style="width: 300px;">
          The young man stared at her for a long moment when she offered it to him. “Valar morghulis,” he said. “Valar dohaeris,” she replied.
        </div>

        <ui-button>上浮显示</ui-button>
      </ui-popover>
    </div>
  </div>
</template>

<script>
import { Popover, Button } from "amumu-ui"
export default {
  components: {
    "ui-popover": Popover,
    "ui-button": Button,
  },
  data() {
    return {
      popperOptions: {
        modifiers: {
          flip: {
            boundariesElement: "viewport",
          },
        },
      },
    }
  },
}
</script>

<style>
.position-container {
  position: fixed;
  height: 300px;
  width: 250px;
  right: 0px;
  bottom: 0px;
  z-index: 10;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 0 11px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 14px;
}
</style>
