diff --git a/src/popover/README.md b/src/popover/README.md
index 5772a8d1b..27ea687f2 100644
--- a/src/popover/README.md
+++ b/src/popover/README.md
@@ -14,7 +14,136 @@ Vue.use(Popover);
### Basic Usage
```html
+
+
+
+ Light Theme
+
+
+
+```
+```js
+export default {
+ data() {
+ return {
+ showPopover: false,
+ actions: [
+ { text: 'Option 1' },
+ { text: 'Option 2' },
+ { text: 'Option 3' },
+ ],
+ };
+ },
+};
+```
+
+### Dark theme
+
+Using the `theme` prop to change the style of Popover.
+
+```html
+
+
+
+ Dark Theme
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ showPopover: false,
+ actions: [
+ { text: 'Option 1' },
+ { text: 'Option 2' },
+ { text: 'Option 3' },
+ ],
+ };
+ },
+};
+```
+
+### Show Icon
+
+```html
+
+
+
+ Show Icon
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ showPopover: false,
+ actions: [
+ { text: 'Option 1', icon: 'add-o' },
+ { text: 'Option 2', icon: 'music-o' },
+ { text: 'Option 3', icon: 'more-o' },
+ ],
+ };
+ },
+};
+```
+
+### Disable Action
+
+Using the `disabled` option to disable an action.
+
+```html
+
+
+
+ Disable Action
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ showPopover: false,
+ actions: [
+ { text: 'Option 1', disabled: true },
+ { text: 'Option 2', disabled: true },
+ { text: 'Option 3' },
+ ],
+ };
+ },
+};
+```
+
+### Placement
+
+```html
+
+```
+
+`placement` supports the following values:
+
+```bash
+top # Top middle
+top-start # Top left
+top-end # Top right
+left # Left middle
+left-start # Left top
+left-end # Left bottom
+right # Right middle
+right-start # Right top
+right-end # Right bottom
+bottom # Bottom middle
+bottom-start # Bottom left
+bottom-end # Bottom right
```
## API
@@ -22,11 +151,37 @@ Vue.use(Popover);
### Props
| Attribute | Description | Type | Default |
-| --------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
+| v-model | Whether to show Popover | _boolean_ | `false` |
+| actions | Actions | _Action[]_ | `[]` |
+| placement | Placement | _string_ | `bottom` |
+| theme | Themeļ¼can be set to `dark` | _string_ | `light` |
+| overlay | Whether to show overlay | _boolean_ | `false` |
+| close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |
+| close-on-click-outside | Whether to close when clicking outside | _boolean_ | `true` |
+| get-container | Return the mount node for Popover | _string \| () => Element_ | `body` |
+### Data Structure of Action
+
+| Key | Description | Type |
+| --------- | ----------------------- | --------- |
+| text | Action Text | _string_ |
+| icon | Icon | _string_ |
+| disabled | Whether to be disabled | _boolean_ |
+| className | className of the option | _any_ |
### Events
-| Event | Description | Arguments |
-| ----- | ----------- | --------- |
+| Event | Description | Arguments |
+| ------ | -------------------------------- | ------------------------------- |
+| select | Triggered when clicking action | _action: Action, index: number_ |
+| open | Triggered when opening Popover | - |
+| close | Triggered when closing Popover | - |
+| opened | Triggered when Popover is opened | - |
+| closed | Triggered when Popover is closed | - |
+### Slots
+
+| Name | Description |
+| --------- | ----------------- |
+| reference | Reference Element |
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 0d52daa8d..69ce4f1c6 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -143,7 +143,7 @@ export default {
showPopover: 'Show Popover',
actionOptions: 'Action Options',
disableAction: 'Disable Action',
- choosePlacement: 'Choose Placement',
+ choosePlacement: 'Placement',
},
},