Popover

The floating card popped by clicking or hovering.

When To Use

A simple popup menu to provide extra information or operations.

Comparing with Tooltip, besides information Popover card can also provide action elements like links and buttons.

Examples

Mouse to click, focus and move in. 

<template>
  <div>
    <a-popover title="Title" trigger="hover">
      <template slot="content">
        <p class="mb-0">Content</p>
        <p class="mb-0">Content</p>
      </template>
      <a-button type="primary">
        Hover me
      </a-button>
    </a-popover>
    <a-popover title="Title" trigger="focus">
      <template slot="content">
        <p class="mb-0">Content</p>
        <p class="mb-0">Content</p>
      </template>
      <a-button type="primary">
        Focus me
      </a-button>
    </a-popover>
    <a-popover title="Title" trigger="click">
      <template slot="content">
        <p class="mb-0">Content</p>
        <p class="mb-0">Content</p>
      </template>
      <a-button type="primary">
        Click me
      </a-button>
    </a-popover>
  </div>
</template>

There are 12 placement options available. 

<template>
  <div id="components-popover-demo-placement">
    <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
      <a-popover placement="topLeft">
        <template slot="content">
          <p class="mb-0">Content</p>
          <p class="mb-0">Content</p>
        </template>
        <template slot="title">
          <span>Title</span>
        </template>
        <a-button>TL</a-button>
      </a-popover>
      <a-popover placement="top">
        <template slot="content">
          <p class="mb-0">Content</p>
          <p class="mb-0">Content</p>
        </template>
        <template slot="title">
          <span>Title</span>
        </template>
        <a-button>Top</a-button>
      </a-popover>
      <a-popover placement="topRight">
        <template slot="content">
          <p class="mb-0">Content</p>
          <p class="mb-0">Content</p>
        </template>
        <template slot="title">
          <span>Title</span>
        </template>
        <a-button>TR</a-button>
      </a-popover>
    </div>
    <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
      <a-popover placement="leftTop">
        <template slot="content">
          <p class="mb-0">Content</p>
          <p class="mb-0">Content</p>
        </template>
        <template slot="title">
          <span>Title</span>
        </template>
        <a-button>LT</a-button>
      </a-popover>
      <a-popover placement="left">
        <template slot="content">
          <p class="mb-0">Content</p>
          <p class="mb-0">Content</p>
        </template>
        <template slot="title">
          <span>Title</span>
        </template>
        <a-button>Left</a-button>
      </a-popover>
      <a-popover placement="leftBottom">
        <template slot="content">
          <p class="mb-0">Content</p>
          <p class="mb-0">Content</p>
        </template>
        <template slot="title">
          <span>Title</span>
        </template>
        <a-button>LB</a-button>
      </a-popover>
    </div>
    <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24}px` }">
      <a-popover placement="rightTop">
        <template slot="content">
          <p class="mb-0">Content</p>
          <p class="mb-0">Content</p>
        </template>
        <template slot="title">
          <span>Title</span>
        </template>
        <a-button>RT</a-button>
      </a-popover>
      <a-popover placement="right">
        <template slot="content">
          <p class="mb-0">Content</p>
          <p class="mb-0">Content</p>
        </template>
        <template slot="title">
          <span>Title</span>
        </template>
        <a-button>Right</a-button>
      </a-popover>
      <a-popover placement="rightBottom">
        <template slot="content">
          <p class="mb-0">Content</p>
          <p class="mb-0">Content</p>
        </template>
        <template slot="title">
          <span>Title</span>
        </template>
        <a-button>RB</a-button>
      </a-popover>
    </div>
    <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
      <a-popover placement="bottomLeft">
        <template slot="content">
          <p class="mb-0">Content</p>
          <p class="mb-0">Content</p>
        </template>
        <template slot="title">
          <span>Title</span>
        </template>
        <a-button>BL</a-button>
      </a-popover>
      <a-popover placement="bottom">
        <template slot="content">
          <p class="mb-0">Content</p>
          <p class="mb-0">Content</p>
        </template>
        <template slot="title">
          <span>Title</span>
        </template>
        <a-button>Bottom</a-button>
      </a-popover>
      <a-popover placement="bottomRight">
        <template slot="content">
          <p class="mb-0">Content</p>
          <p class="mb-0">Content</p>
        </template>
        <template slot="title">
          <span>Title</span>
        </template>
        <a-button>BR</a-button>
      </a-popover>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttonWidth: 70,
    };
  },
};
</script>

Looking for more Ant Design Vue Popover? Please check the official docs.