feat: add tooltip aim-center and refine position demo
This commit is contained in:
Justineo
parent
5a45ce11aa
commit
87e976bb7e
@ -28,13 +28,14 @@
|
|||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| `ui` | `string=` | - | [^ui] |
|
||||||
| `open` | `boolean` | `false` | [^open] |
|
| `open` | `boolean` | `false` | [^open] |
|
||||||
| `target` | `string|Vue|Node` | - | 参考 [`Overlay`](./overlay) 组件的 `target` 属性。 |
|
| `target` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 `target` 属性。 |
|
||||||
| `position` | `string` | `'top'` | [^position] |
|
| `position` | `string` | `'top'` | [^position] |
|
||||||
|
| `aim-center` | `boolean` | `false` | 指定浮层提示箭头是否始终指向目标元素中心。 |
|
||||||
| `trigger` | `string` | `'hover'` | [^trigger] |
|
| `trigger` | `string` | `'hover'` | [^trigger] |
|
||||||
| `interactive` | `boolean` | `true` | 浮层内容是否允许交互。如果为 `false` 则在 `target` 外满足 `trigger` 指定的条件浮层即自动关闭。 |
|
| `interactive` | `boolean` | `true` | 浮层内容是否允许交互。如果为 `false` 则在 `target` 外满足 `trigger` 指定的条件浮层即自动关闭。 |
|
||||||
| `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入浮层进行交互前已经自动关闭。 |
|
| `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入浮层进行交互前已经自动关闭。 |
|
||||||
| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
|
| `overlay-class` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
|
||||||
| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
|
| `overlay-style` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
|
|||||||
@ -1,224 +1,151 @@
|
|||||||
<template>
|
<template>
|
||||||
<article>
|
<article>
|
||||||
<veui-grid-container :columns="5">
|
<section>
|
||||||
<veui-grid-row>
|
<veui-checkbox
|
||||||
<veui-grid-column
|
v-model="aimCenter"
|
||||||
:span="1"
|
ui="s"
|
||||||
:offset="1"
|
|
||||||
>
|
>
|
||||||
<span
|
Aim center
|
||||||
ref="ts"
|
</veui-checkbox>
|
||||||
class="target"
|
</section>
|
||||||
>top-start</span>
|
<section class="grid">
|
||||||
<veui-popover
|
<veui-popover
|
||||||
target="ts"
|
:open.sync="open"
|
||||||
position="top-start"
|
:target="target"
|
||||||
|
:position="position"
|
||||||
|
:aim-center="aimCenter"
|
||||||
>
|
>
|
||||||
Hello.
|
Hello.
|
||||||
</veui-popover>
|
</veui-popover>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
<veui-grid-column :span="1">
|
ref="top-start"
|
||||||
<span
|
style="grid-area: 1 / 2"
|
||||||
ref="t"
|
@mouseenter="show('top-start')"
|
||||||
class="target"
|
|
||||||
>top</span>
|
|
||||||
<veui-popover
|
|
||||||
target="t"
|
|
||||||
position="top"
|
|
||||||
>
|
>
|
||||||
Hello.
|
top-start
|
||||||
</veui-popover>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
<veui-grid-column :span="1">
|
ref="top"
|
||||||
<span
|
style="grid-area: 1 / 3"
|
||||||
ref="te"
|
@mouseenter="show('top')"
|
||||||
class="target"
|
|
||||||
>top-end</span>
|
|
||||||
<veui-popover
|
|
||||||
target="te"
|
|
||||||
position="top-end"
|
|
||||||
>
|
>
|
||||||
Hello.
|
top
|
||||||
</veui-popover>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
</veui-grid-row>
|
ref="top-end"
|
||||||
<veui-grid-row>
|
style="grid-area: 1 / 4"
|
||||||
<veui-grid-column :span="1">
|
@mouseenter="show('top-end')"
|
||||||
<span
|
|
||||||
ref="ls"
|
|
||||||
class="target"
|
|
||||||
>left-start</span>
|
|
||||||
<veui-popover
|
|
||||||
target="ls"
|
|
||||||
position="left-start"
|
|
||||||
>
|
>
|
||||||
Hello.
|
top-end
|
||||||
</veui-popover>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
<veui-grid-column
|
ref="right-start"
|
||||||
:span="1"
|
style="grid-area: 2 / 5"
|
||||||
:offset="3"
|
@mouseenter="show('right-start')"
|
||||||
>
|
>
|
||||||
<span
|
right-start
|
||||||
ref="rs"
|
</veui-button>
|
||||||
class="target"
|
<veui-button
|
||||||
>right-start</span>
|
ref="right"
|
||||||
<veui-popover
|
style="grid-area: 3 / 5"
|
||||||
target="rs"
|
@mouseenter="show('right')"
|
||||||
position="right-start"
|
|
||||||
>
|
>
|
||||||
Hello.
|
right
|
||||||
</veui-popover>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
</veui-grid-row>
|
ref="right-end"
|
||||||
<veui-grid-row>
|
style="grid-area: 4 / 5"
|
||||||
<veui-grid-column :span="1">
|
@mouseenter="show('right-end')"
|
||||||
<span
|
|
||||||
ref="l"
|
|
||||||
class="target"
|
|
||||||
>left</span>
|
|
||||||
<veui-popover
|
|
||||||
target="l"
|
|
||||||
position="left"
|
|
||||||
>
|
>
|
||||||
Hello.
|
right-end
|
||||||
</veui-popover>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
<veui-grid-column
|
ref="bottom-start"
|
||||||
:span="1"
|
style="grid-area: 5 / 2"
|
||||||
:offset="3"
|
@mouseenter="show('bottom-start')"
|
||||||
>
|
>
|
||||||
<span
|
bottom-start
|
||||||
ref="r"
|
</veui-button>
|
||||||
class="target"
|
<veui-button
|
||||||
>right</span>
|
ref="bottom"
|
||||||
<veui-popover
|
style="grid-area: 5 / 3"
|
||||||
target="r"
|
@mouseenter="show('bottom')"
|
||||||
position="right"
|
|
||||||
>
|
>
|
||||||
Hello.
|
bottom
|
||||||
</veui-popover>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
</veui-grid-row>
|
ref="bottom-end"
|
||||||
<veui-grid-row>
|
style="grid-area: 5 / 4"
|
||||||
<veui-grid-column :span="1">
|
@mouseenter="show('bottom-end')"
|
||||||
<span
|
|
||||||
ref="le"
|
|
||||||
class="target"
|
|
||||||
>left-end</span>
|
|
||||||
<veui-popover
|
|
||||||
target="le"
|
|
||||||
position="left-end"
|
|
||||||
>
|
>
|
||||||
Hello.
|
bottom-end
|
||||||
</veui-popover>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
<veui-grid-column
|
ref="left-start"
|
||||||
:span="1"
|
style="grid-area: 2 / 1"
|
||||||
:offset="3"
|
@mouseenter="show('left-start')"
|
||||||
>
|
>
|
||||||
<span
|
left-start
|
||||||
ref="re"
|
</veui-button>
|
||||||
class="target"
|
<veui-button
|
||||||
>right-end</span>
|
ref="left"
|
||||||
<veui-popover
|
style="grid-area: 3 / 1"
|
||||||
target="re"
|
@mouseenter="show('left')"
|
||||||
position="right-end"
|
|
||||||
>
|
>
|
||||||
Hello.
|
left
|
||||||
</veui-popover>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
</veui-grid-row>
|
ref="left-end"
|
||||||
<veui-grid-row>
|
style="grid-area: 4 / 1"
|
||||||
<veui-grid-column
|
@mouseenter="show('left-end')"
|
||||||
:span="1"
|
|
||||||
:offset="1"
|
|
||||||
>
|
>
|
||||||
<span
|
left-end
|
||||||
ref="bs"
|
</veui-button>
|
||||||
class="target"
|
</section>
|
||||||
>bottom-start</span>
|
|
||||||
<veui-popover
|
|
||||||
target="bs"
|
|
||||||
position="bottom-start"
|
|
||||||
>
|
|
||||||
Hello.
|
|
||||||
</veui-popover>
|
|
||||||
</veui-grid-column>
|
|
||||||
<veui-grid-column :span="1">
|
|
||||||
<span
|
|
||||||
ref="b"
|
|
||||||
class="target"
|
|
||||||
>bottom</span>
|
|
||||||
<veui-popover
|
|
||||||
target="b"
|
|
||||||
position="bottom"
|
|
||||||
>
|
|
||||||
Hello.
|
|
||||||
</veui-popover>
|
|
||||||
</veui-grid-column>
|
|
||||||
<veui-grid-column :span="1">
|
|
||||||
<span
|
|
||||||
ref="be"
|
|
||||||
class="target"
|
|
||||||
>bottom-end</span>
|
|
||||||
<veui-popover
|
|
||||||
target="be"
|
|
||||||
position="bottom-end"
|
|
||||||
>
|
|
||||||
Hello.
|
|
||||||
</veui-popover>
|
|
||||||
</veui-grid-column>
|
|
||||||
</veui-grid-row>
|
|
||||||
</veui-grid-container>
|
|
||||||
</article>
|
</article>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { GridContainer, GridRow, GridColumn, Popover } from 'veui'
|
import { Popover, Button, Checkbox } from 'veui'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
'veui-grid-container': GridContainer,
|
'veui-popover': Popover,
|
||||||
'veui-grid-row': GridRow,
|
'veui-button': Button,
|
||||||
'veui-grid-column': GridColumn,
|
'veui-checkbox': Checkbox
|
||||||
'veui-popover': Popover
|
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
ui: null
|
target: null,
|
||||||
|
position: null,
|
||||||
|
open: false,
|
||||||
|
aimCenter: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
show (position) {
|
||||||
|
this.target = this.$refs[position]
|
||||||
|
this.position = position
|
||||||
|
this.open = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.veui-grid-container {
|
section + section {
|
||||||
width: 80%;
|
margin-top: 20px;
|
||||||
min-width: 600px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.veui-grid-row {
|
.grid {
|
||||||
margin-bottom: 20px;
|
display: grid;
|
||||||
}
|
grid-template-columns: auto auto auto auto auto;
|
||||||
|
grid-gap: 12px;
|
||||||
.veui-grid-column {
|
justify-content: center;
|
||||||
text-align: center;
|
align-items: center;
|
||||||
vertical-align: middle;
|
|
||||||
line-height: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.target {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.5em 0;
|
|
||||||
border: 1px solid #999;
|
|
||||||
border-radius: 2px;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<docs>
|
||||||
|
使用 `aim-center` 属性来设置浮层提示箭头始终对准目标元素中心，适合用于目标元素较小的场景。
|
||||||
|
</docs>
|
||||||
|
|||||||
@ -1,224 +1,151 @@
|
|||||||
<template>
|
<template>
|
||||||
<article>
|
<article>
|
||||||
<veui-grid-container :columns="5">
|
<section>
|
||||||
<veui-grid-row>
|
<veui-checkbox
|
||||||
<veui-grid-column
|
v-model="aimCenter"
|
||||||
:span="1"
|
ui="s"
|
||||||
:offset="1"
|
|
||||||
>
|
>
|
||||||
<span
|
Aim center
|
||||||
ref="ts"
|
</veui-checkbox>
|
||||||
class="target"
|
</section>
|
||||||
>top-start</span>
|
<section class="grid">
|
||||||
<veui-tooltip
|
<veui-tooltip
|
||||||
target="ts"
|
:open.sync="open"
|
||||||
position="top-start"
|
:target="target"
|
||||||
|
:position="position"
|
||||||
|
:aim-center="aimCenter"
|
||||||
>
|
>
|
||||||
Hello.
|
Hello.
|
||||||
</veui-tooltip>
|
</veui-tooltip>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
<veui-grid-column :span="1">
|
ref="top-start"
|
||||||
<span
|
style="grid-area: 1 / 2"
|
||||||
ref="t"
|
@mouseenter="show('top-start')"
|
||||||
class="target"
|
|
||||||
>top</span>
|
|
||||||
<veui-tooltip
|
|
||||||
target="t"
|
|
||||||
position="top"
|
|
||||||
>
|
>
|
||||||
Hello.
|
top-start
|
||||||
</veui-tooltip>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
<veui-grid-column :span="1">
|
ref="top"
|
||||||
<span
|
style="grid-area: 1 / 3"
|
||||||
ref="te"
|
@mouseenter="show('top')"
|
||||||
class="target"
|
|
||||||
>top-end</span>
|
|
||||||
<veui-tooltip
|
|
||||||
target="te"
|
|
||||||
position="top-end"
|
|
||||||
>
|
>
|
||||||
Hello.
|
top
|
||||||
</veui-tooltip>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
</veui-grid-row>
|
ref="top-end"
|
||||||
<veui-grid-row>
|
style="grid-area: 1 / 4"
|
||||||
<veui-grid-column :span="1">
|
@mouseenter="show('top-end')"
|
||||||
<span
|
|
||||||
ref="ls"
|
|
||||||
class="target"
|
|
||||||
>left-start</span>
|
|
||||||
<veui-tooltip
|
|
||||||
target="ls"
|
|
||||||
position="left-start"
|
|
||||||
>
|
>
|
||||||
Hello.
|
top-end
|
||||||
</veui-tooltip>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
<veui-grid-column
|
ref="right-start"
|
||||||
:span="1"
|
style="grid-area: 2 / 5"
|
||||||
:offset="3"
|
@mouseenter="show('right-start')"
|
||||||
>
|
>
|
||||||
<span
|
right-start
|
||||||
ref="rs"
|
</veui-button>
|
||||||
class="target"
|
<veui-button
|
||||||
>right-start</span>
|
ref="right"
|
||||||
<veui-tooltip
|
style="grid-area: 3 / 5"
|
||||||
target="rs"
|
@mouseenter="show('right')"
|
||||||
position="right-start"
|
|
||||||
>
|
>
|
||||||
Hello.
|
right
|
||||||
</veui-tooltip>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
</veui-grid-row>
|
ref="right-end"
|
||||||
<veui-grid-row>
|
style="grid-area: 4 / 5"
|
||||||
<veui-grid-column :span="1">
|
@mouseenter="show('right-end')"
|
||||||
<span
|
|
||||||
ref="l"
|
|
||||||
class="target"
|
|
||||||
>left</span>
|
|
||||||
<veui-tooltip
|
|
||||||
target="l"
|
|
||||||
position="left"
|
|
||||||
>
|
>
|
||||||
Hello.
|
right-end
|
||||||
</veui-tooltip>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
<veui-grid-column
|
ref="bottom-start"
|
||||||
:span="1"
|
style="grid-area: 5 / 2"
|
||||||
:offset="3"
|
@mouseenter="show('bottom-start')"
|
||||||
>
|
>
|
||||||
<span
|
bottom-start
|
||||||
ref="r"
|
</veui-button>
|
||||||
class="target"
|
<veui-button
|
||||||
>right</span>
|
ref="bottom"
|
||||||
<veui-tooltip
|
style="grid-area: 5 / 3"
|
||||||
target="r"
|
@mouseenter="show('bottom')"
|
||||||
position="right"
|
|
||||||
>
|
>
|
||||||
Hello.
|
bottom
|
||||||
</veui-tooltip>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
</veui-grid-row>
|
ref="bottom-end"
|
||||||
<veui-grid-row>
|
style="grid-area: 5 / 4"
|
||||||
<veui-grid-column :span="1">
|
@mouseenter="show('bottom-end')"
|
||||||
<span
|
|
||||||
ref="le"
|
|
||||||
class="target"
|
|
||||||
>left-end</span>
|
|
||||||
<veui-tooltip
|
|
||||||
target="le"
|
|
||||||
position="left-end"
|
|
||||||
>
|
>
|
||||||
Hello.
|
bottom-end
|
||||||
</veui-tooltip>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
<veui-grid-column
|
ref="left-start"
|
||||||
:span="1"
|
style="grid-area: 2 / 1"
|
||||||
:offset="3"
|
@mouseenter="show('left-start')"
|
||||||
>
|
>
|
||||||
<span
|
left-start
|
||||||
ref="re"
|
</veui-button>
|
||||||
class="target"
|
<veui-button
|
||||||
>right-end</span>
|
ref="left"
|
||||||
<veui-tooltip
|
style="grid-area: 3 / 1"
|
||||||
target="re"
|
@mouseenter="show('left')"
|
||||||
position="right-end"
|
|
||||||
>
|
>
|
||||||
Hello.
|
left
|
||||||
</veui-tooltip>
|
</veui-button>
|
||||||
</veui-grid-column>
|
<veui-button
|
||||||
</veui-grid-row>
|
ref="left-end"
|
||||||
<veui-grid-row>
|
style="grid-area: 4 / 1"
|
||||||
<veui-grid-column
|
@mouseenter="show('left-end')"
|
||||||
:span="1"
|
|
||||||
:offset="1"
|
|
||||||
>
|
>
|
||||||
<span
|
left-end
|
||||||
ref="bs"
|
</veui-button>
|
||||||
class="target"
|
</section>
|
||||||
>bottom-start</span>
|
|
||||||
<veui-tooltip
|
|
||||||
target="bs"
|
|
||||||
position="bottom-start"
|
|
||||||
>
|
|
||||||
Hello.
|
|
||||||
</veui-tooltip>
|
|
||||||
</veui-grid-column>
|
|
||||||
<veui-grid-column :span="1">
|
|
||||||
<span
|
|
||||||
ref="b"
|
|
||||||
class="target"
|
|
||||||
>bottom</span>
|
|
||||||
<veui-tooltip
|
|
||||||
target="b"
|
|
||||||
position="bottom"
|
|
||||||
>
|
|
||||||
Hello.
|
|
||||||
</veui-tooltip>
|
|
||||||
</veui-grid-column>
|
|
||||||
<veui-grid-column :span="1">
|
|
||||||
<span
|
|
||||||
ref="be"
|
|
||||||
class="target"
|
|
||||||
>bottom-end</span>
|
|
||||||
<veui-tooltip
|
|
||||||
target="be"
|
|
||||||
position="bottom-end"
|
|
||||||
>
|
|
||||||
Hello.
|
|
||||||
</veui-tooltip>
|
|
||||||
</veui-grid-column>
|
|
||||||
</veui-grid-row>
|
|
||||||
</veui-grid-container>
|
|
||||||
</article>
|
</article>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { GridContainer, GridRow, GridColumn, Tooltip } from 'veui'
|
import { Tooltip, Button, Checkbox } from 'veui'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
'veui-grid-container': GridContainer,
|
'veui-tooltip': Tooltip,
|
||||||
'veui-grid-row': GridRow,
|
'veui-button': Button,
|
||||||
'veui-grid-column': GridColumn,
|
'veui-checkbox': Checkbox
|
||||||
'veui-tooltip': Tooltip
|
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
ui: null
|
target: null,
|
||||||
|
position: null,
|
||||||
|
open: false,
|
||||||
|
aimCenter: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
show (position) {
|
||||||
|
this.target = this.$refs[position]
|
||||||
|
this.position = position
|
||||||
|
this.open = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.veui-grid-container {
|
section + section {
|
||||||
width: 80%;
|
margin-top: 20px;
|
||||||
min-width: 600px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.veui-grid-row {
|
.grid {
|
||||||
margin-bottom: 20px;
|
display: grid;
|
||||||
}
|
grid-template-columns: auto auto auto auto auto;
|
||||||
|
grid-gap: 12px;
|
||||||
.veui-grid-column {
|
justify-content: center;
|
||||||
text-align: center;
|
align-items: center;
|
||||||
vertical-align: middle;
|
|
||||||
line-height: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.target {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.5em 0;
|
|
||||||
border: 1px solid #999;
|
|
||||||
border-radius: 2px;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<docs>
|
||||||
|
使用 `aim-center` 属性来设置浮层提示箭头始终对准目标元素中心，适合用于目标元素较小的场景。
|
||||||
|
</docs>
|
||||||
|
|||||||
@ -30,6 +30,7 @@ Use the `trigger` prop to specify when to show/hide the tooltip.
|
|||||||
| `open` | `boolean` | `false` | [^open] |
|
| `open` | `boolean` | `false` | [^open] |
|
||||||
| `target` | `string|Vue|Node` | - | See the [`target` prop](./overlay#props) of thh [`Overlay`](./overlay) component. |
|
| `target` | `string|Vue|Node` | - | See the [`target` prop](./overlay#props) of thh [`Overlay`](./overlay) component. |
|
||||||
| `position` | `string` | `'top'` | [^position] |
|
| `position` | `string` | `'top'` | [^position] |
|
||||||
|
| `aim-center` | `boolean` | `false` | Whether the tooltip arrow always points to the center of the target element. |
|
||||||
| `trigger` | `string` | `'hover'` | [^trigger] |
|
| `trigger` | `string` | `'hover'` | [^trigger] |
|
||||||
| `interactive` | `boolean` | `true` | Whether the tooltip content is interactive. When set to `false`, the tooltip will be automatically hidden after the event specified by `trigger` is triggered outside the `target`. |
|
| `interactive` | `boolean` | `true` | Whether the tooltip content is interactive. When set to `false`, the tooltip will be automatically hidden after the event specified by `trigger` is triggered outside the `target`. |
|
||||||
| `hide-delay` | `number` | `tooltip.hideDelays` | Time (in milliseconds) to wait before hiding the tooltip after the close trigger is triggered. Can be used to prevent the tooltip being immediately closed after pointer leaves the `target` element and before it enters the tooltip itself. |
|
| `hide-delay` | `number` | `tooltip.hideDelays` | Time (in milliseconds) to wait before hiding the tooltip after the close trigger is triggered. Can be used to prevent the tooltip being immediately closed after pointer leaves the `target` element and before it enters the tooltip itself. |
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user