From 068dc8ec388c33bc5572ca63f1be0533e9d81b2a Mon Sep 17 00:00:00 2001
From: Ilan <hasanovtk@gmail.com>
Date: Sun, 29 Jul 2018 01:34:49 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20popover=20that=20can=20be=20hovered?=
 =?UTF-8?q?=20and=20clicked?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/__snapshots__/demo.test.js.snap | 11 +++
 components/popover/demo/hover-with-click.md   | 86 +++++++++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 components/popover/demo/hover-with-click.md

diff --git a/components/popover/__tests__/__snapshots__/demo.test.js.snap b/components/popover/__tests__/__snapshots__/demo.test.js.snap
index f9d82fa3c0..860bc98ce3 100644
--- a/components/popover/__tests__/__snapshots__/demo.test.js.snap
+++ b/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"
diff --git a/components/popover/demo/hover-with-click.md b/components/popover/demo/hover-with-click.md
new file mode 100644
index 0000000000..c3d3a14e5e
--- /dev/null
+++ b/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);
+````