test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-30 18:27:40 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

chore(docs): fix tooltip document (#5421)

Browse Source
This commit is contained in:
weidehai 2022-01-20 15:28:18 +08:00 committed by GitHub
parent c552c3b700
commit 47fdd4f542
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
docs/en-US/component/tooltip.md
View File

@ -122,7 +122,7 @@ tooltip/singleton
## Controlled
Tooltip can be controlled by the parent component, by using `v-model` you can implement two way binding.
Tooltip can be controlled by the parent component, by using `v-model:visible` you can implement two way binding.
:::demo
@ -142,28 +142,28 @@ tooltip/animations
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| append-to-body | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean | — | true |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | dark |
| content | display content, can be overridden by `slot#content` | String | — | — |
| placement | position of Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| model-value / v-model | visibility of Tooltip | boolean | — | false |
| disabled | whether Tooltip is disabled | boolean | — | false |
| offset | offset of the Tooltip | number | — | 0 |
| transition | animation name | string | — | el-fade-in-linear |
| visible-arrow | whether an arrow is displayed. For more information, check [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper) page | boolean | — | true |
| popper-options | [popper.js](https://popper.js.org/documentation.html) parameters | Object | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| show-after | delay of appearance, in millisecond | number | — | 0 |
| hide-after | delay of disappear, in millisecond | number | — | 0 |
| auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
| popper-class | custom class name for Tooltip's popper | string | — | — |
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |
| trigger | How should the tooltip be triggered (to show) | string | hover / click / focus / contextmenu | hover |
| virtual-triggering | Indicates whether virtual triggering is enabled | boolean | - | false |
| virtual-ref | Indicates the reference element to which the tooltip is attached | HTMLElement | - | - |
| Attribute | Description | Type | Accepted Values | Default |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| append-to-body | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean | — | true |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | dark |
| content | display content, can be overridden by `slot#content` | String | — | — |
| placement | position of Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| visible / v-model:visible | visibility of Tooltip | boolean | — | false |
| disabled | whether Tooltip is disabled | boolean | — | false |
| offset | offset of the Tooltip | number | — | 0 |
| transition | animation name | string | — | el-fade-in-linear |
| visible-arrow | whether an arrow is displayed. For more information, check [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper) page | boolean | — | true |
| popper-options | [popper.js](https://popper.js.org/documentation.html) parameters | Object | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| show-after | delay of appearance, in millisecond | number | — | 0 |
| hide-after | delay of disappear, in millisecond | number | — | 0 |
| auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
| popper-class | custom class name for Tooltip's popper | string | — | — |
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |
| trigger | How should the tooltip be triggered (to show) | string | hover / click / focus / contextmenu | hover |
| virtual-triggering | Indicates whether virtual triggering is enabled | boolean | - | false |
| virtual-ref | Indicates the reference element to which the tooltip is attached | HTMLElement | - | - |
## Slots

2
docs/examples/tooltip/controlled.vue
View File

@ -1,5 +1,5 @@
<template>
<el-tooltip v-model="visible">
<el-tooltip v-model:visible="visible">
<template #content>
<span>
<p>Content</p>