✨ popover that can be hovered and clicked

components/popover/__tests__/__snapshots__/demo.test.js.snap

@@ -43,6 +43,17 @@ exports[`renders ./components/popover/demo/control.md correctly 1`] = `
 </button>
 `;
 
+exports[`renders ./components/popover/demo/hover-with-click.md correctly 1`] = `
+<button
+  class="ant-btn"
+  type="button"
+>
+  <span>
+    Hover and click / 悬停并单击
+  </span>
+</button>
+`;
+
 exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
 <div
   class="demo"

components/popover/demo/hover-with-click.md

@@ -0,0 +1,86 @@
+---
+order: 3
+title:
+  zh-CN: 悬停点击弹出窗口
+  en-US: Hover with click popover
+---
+
+## zh-CN
+
+以下示例显示如何创建可悬停和单击的弹出窗口。
+
+## en-US
+
+The following example shows how to create a popover which can be hovered and clicked.
+
+````jsx
+import { Popover, Button } from 'antd';
+
+const hoverContent = (
+  <div>
+    This is hover content.
+  </div>
+);
+
+const clickContent = (
+  <div>
+    This is click content.
+  </div>
+);
+
+const initalState = {
+  clicked: false,
+  hovered: false,
+};
+
+class App extends React.Component {
+  state = initalState;
+
+  hide = () => {
+    this.setState({
+      ...initalState,
+    });
+  }
+
+  handleHoverChange = (visible) => {
+    this.setState({
+      hovered: visible,
+      clicked: false,
+    });
+  }
+
+  handleClickChange = (visible) => {
+    this.setState({
+      clicked: visible,
+      hovered: false,
+    });
+  }
+
+  render() {
+    return (
+      <Popover
+        key="1"
+        style={{ width: 500 }}
+        content={hoverContent}
+        title="Hover title"
+        trigger="hover"
+        visible={this.state.hovered}
+        onVisibleChange={this.handleHoverChange}
+      >
+        <Popover
+          key="2"
+          content={[clickContent, <a onClick={this.hide}>Close</a>]}
+          title="Click title"
+          trigger="click"
+          visible={this.state.clicked}
+          onVisibleChange={this.handleClickChange}
+        >
+          <Button>Hover and click / 悬停并单击</Button>
+        </Popover>
+      </Popover>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+````