diff --git a/docs/en-US/component/tooltip.md b/docs/en-US/component/tooltip.md index 13b940c0e8..a2d82d4a71 100644 --- a/docs/en-US/component/tooltip.md +++ b/docs/en-US/component/tooltip.md @@ -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 diff --git a/docs/examples/tooltip/controlled.vue b/docs/examples/tooltip/controlled.vue index ee5321d398..d14094be08 100644 --- a/docs/examples/tooltip/controlled.vue +++ b/docs/examples/tooltip/controlled.vue @@ -1,5 +1,5 @@