mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
48 lines
1.8 KiB
Markdown
48 lines
1.8 KiB
Markdown
# Popover
|
|
|
|
Pop some hidden message around content. There isn't much builtin styles in popover. It's more up to you to fill the content.
|
|
|
|
If you just want to display some basic text message, see [Tooltip](n-tooltip) instead.
|
|
|
|
## Demos
|
|
|
|
```demo
|
|
basic
|
|
trigger
|
|
delay
|
|
no-arrow
|
|
event
|
|
placement
|
|
raw-content
|
|
width
|
|
manual-position
|
|
```
|
|
|
|
## Props
|
|
|Name|Type|Default|Description|
|
|
|-|-|-|-|
|
|
|arrow-style|`Object`|`undefined`||
|
|
|body-class|`string`|`undefined`||
|
|
|body-style|`Object`|`undefined`||
|
|
|delay|`number`|`200`|Popover showing delay when trigger is `hover`|
|
|
|disabled|`boolean`|`false`|Whether the popover can't be activated.|
|
|
|display-directive|`'if' \| 'show'`|`'if'`|The conditionally render directive to show popover content. `if` means using `v-if` to render content, `show` means using `v-show` to render content.|
|
|
|duration|`number`|`200`|Popover vanish delay when trigger is `hover`|
|
|
|filp|`boolean`|`true`|Whether to filp the popover when there is no space for current placement.|
|
|
|manually-positioned|`boolean`|`false`|Whether to manually position the popover.|
|
|
|placement|`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| `|`'bottom'`||
|
|
|raw|`boolean`|`false`|Whether to use no default styles.|
|
|
|show-arrow|`boolean`|`true`||
|
|
|show|`boolean`|`undefined`|Whether to show popover if set.|
|
|
|theme|`'light' \| 'dark' \| string`|`undefined`||
|
|
|trigger|`'hover' \| 'click'`|`'hover'`||
|
|
|x|`number`|`undefined`|The CSS `left` pixel value when popover manually positioned.|
|
|
|y|`number`|`undefined`|The CSS `top` pixel value when popover manually positioned.|
|
|
|on-update:show|`(value: boolean) => any`|||
|
|
|
|
## Slots
|
|
|Name|Parameters|Description|
|
|
|-|-|-|
|
|
|trigger|`()`|The element or component that triggers popover.|
|
|
|default|`()`|The content inside popover.|
|