Popover 气泡卡片

点击/鼠标移入元素，弹出气泡式的卡片浮层。

何时使用

当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。

和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。

API

参数	说明	类型	默认值
trigger	触发行为，可选 `hover/focus/click`	string	hover
placement	气泡框位置，可选 `top/left/right/bottom`	string	top
title	卡片标题	React.Element	无
content	卡片内容	React.Element	无
overlayClassName	浮层的类名	string	无

组件演示

var Popover = antd.Popover;
var content = <div>
  <p>内容</p>
  <p>内容</p>
</div>;

React.render(
  <Popover overlay={content} title="标题">
    <button className="ant-btn ant-btn-primary">弹出卡片</button>
  </Popover>
, document.getElementById('components-popover-demo-basic'));

基本

最简单的用法。

var Popover = antd.Popover;
var content = <div>
  <p>内容</p>
  <p>内容</p>
</div>;

React.render(<div>
  <Popover overlay={content} title="标题" trigger="hover">
    <button className="ant-btn">移入</button>
  </Popover>
  <Popover overlay={content} title="标题" trigger="focus">
    <a href="javascript:;" className="ant-btn">聚焦</a>
  </Popover>
  <Popover overlay={content} title="标题" trigger="click">
    <button className="ant-btn">点击</button>
  </Popover>
</div>, document.getElementById('components-popover-demo-triggertype'));

三种触发方式

鼠标移入、聚集、点击。

var Popover = antd.Popover;
var text = <span>标题</span>;
var content = <div>
  <p>内容</p>
  <p>内容</p>
</div>;

React.render(<div>
  <Popover placement="left" title={text} overlay={content}>
    <button className="ant-btn">左</button>
  </Popover>
  <Popover placement="top" title={text} overlay={content}>
    <button className="ant-btn">上</button>
  </Popover>
  <Popover placement="bottom" title={text} overlay={content}>
    <button className="ant-btn">下</button>
  </Popover>
  <Popover placement="right" title={text} overlay={content}>
    <button className="ant-btn">右</button>
  </Popover>
</div>, document.getElementById('components-popover-demo-placement'));

位置

位置有四个方向。