mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
docs(components): [tooltip] optimized basic example (#23756)
* perf(docs): [tooltip] optimized basic example The `left-*` and `right-*` example are showing single line content, so user wouldn't see what's the difference between them. Now I changed them to multiline content. * style(docs): [tooltip] improve documentation for clarity and consistency * docs(components): [tooltip] fixed typos * docs(components): [tooltip] removed leftover prop * Update docs/examples/tooltip/basic.vue --------- Co-authored-by: rzzf <cszhjh@gmail.com>
This commit is contained in:
Zachary Bear
@@ -162,33 +162,33 @@ tooltip/append-to
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
|
||||
| append-to | which element the tooltip CONTENT appends to | ^[CSSSelector] / ^[HTMLElement] | — |
|
||||
| append-to | Which element the tooltip CONTENT appends to | ^[CSSSelector] / ^[HTMLElement] | — |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | ^[enum]`'dark' \| 'light'` | dark |
|
||||
| content | display content, can be overridden by `slot#content` | ^[string] | '' |
|
||||
| raw-content | whether `content` is treated as HTML string | ^[boolean] | false |
|
||||
| placement | position of Tooltip | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom |
|
||||
| fallback-placements | list of possible positions for Tooltip [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[array]`Placement[]` | — |
|
||||
| visible / v-model:visible | visibility of Tooltip | ^[boolean] | — |
|
||||
| disabled | whether Tooltip is disabled | ^[boolean] | — |
|
||||
| offset | offset of the Tooltip | ^[number] | 12 |
|
||||
| transition | animation name | ^[string] | — |
|
||||
| content | Display content, can be overridden by `slot#content` | ^[string] | '' |
|
||||
| raw-content | Whether `content` is treated as HTML string | ^[boolean] | false |
|
||||
| placement | Position of Tooltip | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom |
|
||||
| fallback-placements | List of possible positions for Tooltip [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[array]`Placement[]` | — |
|
||||
| visible / v-model:visible | Visibility of Tooltip | ^[boolean] | — |
|
||||
| disabled | Whether Tooltip is disabled | ^[boolean] | — |
|
||||
| offset | Offset of the Tooltip | ^[number] | 12 |
|
||||
| transition | Animation name | ^[string] | — |
|
||||
| popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters | ^[object]refer to [popper.js](https://popper.js.org/docs/v2/) doc | {} |
|
||||
| arrow-offset ^(2.9.10) | Controls the offset (padding) of the tooltip’s arrow relative to the popper. | ^[number] | 5 |
|
||||
| show-after | delay of appearance, in millisecond, not valid in controlled mode | ^[number] | 0 |
|
||||
| show-arrow | whether the tooltip content has an arrow | ^[boolean] | true |
|
||||
| hide-after | delay of disappear, in millisecond, not valid in controlled mode | ^[number] | 200 |
|
||||
| auto-close | timeout in milliseconds to hide tooltip, not valid in controlled mode | ^[number] | 0 |
|
||||
| popper-class | custom class name for Tooltip's popper | ^[string] | — |
|
||||
| popper-style | custom style for Tooltip's popper | ^[string] / ^[object] | — |
|
||||
| enterable | whether the mouse can enter the tooltip | ^[boolean] | true |
|
||||
| teleported | whether tooltip content is teleported, if `true` it will be teleported to where `append-to` sets | ^[boolean] | true |
|
||||
| show-after | Delay of appearance, in millisecond, not valid in controlled mode | ^[number] | 0 |
|
||||
| show-arrow | Whether the tooltip content has an arrow | ^[boolean] | true |
|
||||
| hide-after | Delay of disappear, in millisecond, not valid in controlled mode | ^[number] | 200 |
|
||||
| auto-close | Timeout in milliseconds to hide tooltip, not valid in controlled mode | ^[number] | 0 |
|
||||
| popper-class | Custom class name for Tooltip's popper | ^[string] | — |
|
||||
| popper-style | Custom style for Tooltip's popper | ^[string] / ^[object] | — |
|
||||
| enterable | Whether the mouse can enter the tooltip | ^[boolean] | true |
|
||||
| teleported | Whether tooltip content is teleported, if `true` it will be teleported to where `append-to` sets | ^[boolean] | true |
|
||||
| trigger | How should the tooltip be triggered (to show), not valid in controlled mode | ^[enum]`'hover' \| 'click' \| 'focus' \| 'contextmenu'` / ^[array]`Array<'click' \| 'focus' \| 'hover' \| 'contextmenu'>` | hover |
|
||||
| virtual-triggering | Indicates whether virtual triggering is enabled | ^[boolean] | — |
|
||||
| virtual-ref | Indicates the reference element to which the tooltip is attached | ^[HTMLElement] | — |
|
||||
| trigger-keys | When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard, not valid in controlled mode | ^[Array] | ['Enter','Space'] |
|
||||
| persistent | when tooltip inactive and `persistent` is `false` , tooltip will be destroyed | ^[boolean] | — |
|
||||
| aria-label ^(a11y) | same as `aria-label` | ^[string] | — |
|
||||
| focus-on-target ^(2.11.2) | when triggering tooltips through hover, whether to focus the trigger element, which improves accessibility | ^[boolean] | false |
|
||||
| persistent | When tooltip inactive and `persistent` is `false` , tooltip will be destroyed | ^[boolean] | — |
|
||||
| aria-label ^(a11y) | Same as `aria-label` | ^[string] | — |
|
||||
| focus-on-target ^(2.11.2) | When triggering tooltips through hover, whether to focus the trigger element, which improves accessibility | ^[boolean] | false |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -204,7 +204,7 @@ tooltip/append-to
|
||||
| Name | Description |
|
||||
| ------- | ------------------------------------------------------------------------------ |
|
||||
| default | Tooltip triggering & reference element, only a single root element is accepted |
|
||||
| content | customize content |
|
||||
| content | Customize content |
|
||||
|
||||
### Exposes
|
||||
|
||||
@@ -212,11 +212,11 @@ tooltip/append-to
|
||||
| -------------------- | ----------------------------------------------------------------- | --------------------------------------------------- |
|
||||
| popperRef | el-popper component instance | ^[object]`Ref<PopperInstance \| undefined>` |
|
||||
| contentRef | el-tooltip-content component instance | ^[object]`Ref<TooltipContentInstance \| undefined>` |
|
||||
| isFocusInsideContent | validate current focus event is trigger inside el-tooltip-content | ^[Function]`() => boolean \| undefined` |
|
||||
| updatePopper | update el-popper component instance | ^[Function]`() => void` |
|
||||
| onOpen | expose onOpen function to mange el-tooltip open state | ^[Function]`(event?: Event \| undefined) => void` |
|
||||
| onClose | expose onClose function to mange el-tooltip open state | ^[Function]`(event?: Event \| undefined) => void` |
|
||||
| hide | expose hide function | ^[Function]`(event?: Event \| undefined) => void` |
|
||||
| isFocusInsideContent | Validate current focus event is trigger inside el-tooltip-content | ^[Function]`() => boolean \| undefined` |
|
||||
| updatePopper | Update el-popper component instance | ^[Function]`() => void` |
|
||||
| onOpen | Expose onOpen function to manage el-tooltip open state | ^[Function]`(event?: Event \| undefined) => void` |
|
||||
| onClose | Expose onClose function to manage el-tooltip open state | ^[Function]`(event?: Event \| undefined) => void` |
|
||||
| hide | Expose hide function | ^[Function]`(event?: Event \| undefined) => void` |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
||||
@@ -27,56 +27,56 @@
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="Left Top prompts info"
|
||||
placement="left-start"
|
||||
>
|
||||
<el-tooltip class="box-item" effect="dark" placement="left-start">
|
||||
<template #content>
|
||||
Left Top
|
||||
<br />
|
||||
prompts info
|
||||
</template>
|
||||
<el-button>left-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="Right Top prompts info"
|
||||
placement="right-start"
|
||||
>
|
||||
<el-tooltip class="box-item" effect="dark" placement="right-start">
|
||||
<template #content>
|
||||
Right Top
|
||||
<br />
|
||||
prompts info
|
||||
</template>
|
||||
<el-button>right-start</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="Left Center prompts info"
|
||||
placement="left"
|
||||
>
|
||||
<el-tooltip class="box-item" effect="dark" placement="left">
|
||||
<template #content>
|
||||
Left Center
|
||||
<br />
|
||||
prompts info
|
||||
</template>
|
||||
<el-button class="mt-3 mb-3">left</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="Right Center prompts info"
|
||||
placement="right"
|
||||
>
|
||||
<el-tooltip class="box-item" effect="dark" placement="right">
|
||||
<template #content>
|
||||
Right Center
|
||||
<br />
|
||||
prompts info
|
||||
</template>
|
||||
<el-button>right</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="Left Bottom prompts info"
|
||||
placement="left-end"
|
||||
>
|
||||
<el-tooltip class="box-item" effect="dark" placement="left-end">
|
||||
<template #content>
|
||||
Left Bottom
|
||||
<br />
|
||||
prompts info
|
||||
</template>
|
||||
<el-button>left-end</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="Right Bottom prompts info"
|
||||
placement="right-end"
|
||||
>
|
||||
<el-tooltip class="box-item" effect="dark" placement="right-end">
|
||||
<template #content>
|
||||
Right Bottom
|
||||
<br />
|
||||
prompts info
|
||||
</template>
|
||||
<el-button>right-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user