Tootip
常用于展示鼠标 hover
时的提示信息.
基础用法
在这里我们提供 9 种不同方向的展示方式,可以通过以下完整示例来理解,选择你要的效果.
使用 content
属性来决定 hover
时的提示信息. 由 placement
属性决定展示效果: placement属性值为:[方向]-[对齐位置];四个方向:top、left、right、bottom;三种对齐位置:start, end,默认为bottom
.如 placement="left-end"
,则提示信息出现在目标元素的左侧,且提示信息的底部与目标元素的底部对齐.
<script setup lang="ts">
import Tooltip from '../../../src/components/Tooltip/Tooltip.vue'
import Button from '../../../src/components/Button/Button.vue'
</script>
<template>
<div class="content">
<div class="left flex">
<Tooltip placement="left-start" content="Left Top prompts info">
<Button>left-start</Button>
</Tooltip>
<Tooltip placement="left" class="mt-20" content="Left prompts info">
<Button>left</Button>
</Tooltip>
<Tooltip placement="left-end" class="mt-20" content="Left End prompts info">
<Button>left-end</Button>
</Tooltip>
</div>
<div class="center">
<div class="top">
<Tooltip placement="top-start" content="Top Start prompts info">
<Button>top-start</Button>
</Tooltip>
<Tooltip placement="top" style="margin: 0 20px" content="Top prompts info">
<Button>top</Button>
</Tooltip>
<Tooltip placement="top-end" content="Top End prompts info">
<Button>top-end</Button>
</Tooltip>
</div>
<div class="bottom">
<Tooltip placement="bottom-start" content="Bottom Top prompts info">
<Button>bottom-start</Button>
</Tooltip>
<Tooltip placement="bottom" style="margin: 0 20px" content="Bottom prompts info">
<Button>bottom</Button>
</Tooltip>
<Tooltip placement="bottom-end" content="Bottom End prompts info">
<Button>bottom-end</Button>
</Tooltip>
</div>
</div>
<div class="right flex">
<Tooltip placement="right-start" content="Right Top prompts info">
<Button>right-start</Button>
</Tooltip>
<Tooltip placement="right" class="mt-20" content="Right prompts info">
<Button>right</Button>
</Tooltip>
<Tooltip placement="right" class="mt-20" content="Right End prompts info<">
<Button>right-end</Button>
</Tooltip>
</div>
</div>
</template>
<style scoped lang="scss">
.flex {
display: flex;
flex-direction: column;
align-items: center;
}
.mt-20 {
margin-top: 20px;
}
.content {
display: flex;
justify-content: space-between;
text-align: center;
.center {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
</style>
手动控制
xin-tooltip支持手动控制Tooltip组件的显示和隐藏.
首先,确保您已经将Tooltip设置为manual
模式,否则无法实现手动控制.
确保开启manual
模式后,通过Ref
获取Tooltip组件实例,实例中存有showTooltip
与closeTooltip
,分别是显示与隐藏方法.
<script setup lang="ts">
import Tooltip from '../../../src/components/Tooltip/Tooltip.vue'
import Button from '../../../src/components/Button/Button.vue'
import { ref } from 'vue'
import type { TooltipInstance } from '../../../src/components/Tooltip/types'
const toggleState = ref<boolean>(false)
const tooltipRef = ref<TooltipInstance | null>(null)
const handleClick = () => {
toggleState.value = !toggleState.value
if (tooltipRef.value && toggleState.value) {
tooltipRef.value?.showTooltip()
} else {
tooltipRef.value?.closeTooltip()
}
}
</script>
<template>
<div>
<Tooltip ref="tooltipRef" placement="left" manual>
<Button type="primary">xin</Button>
<template #content>
<div>xinxin OvO</div>
</template>
</Tooltip>
<div class="controlTooltip">
<Button round @click="handleClick">点我控制Tolltip显示与隐藏</Button>
</div>
</div>
</template>
<style scoped>
.controlTooltip {
margin-top: 20px;
}
</style>
更多内容的文字提示
展示多行文本或者是设置文本内容的格式.
用具名 slot content
,替代tooltip中的content属性
.
<script setup lang="ts">
import Tooltip from '../../../src/components/Tooltip/Tooltip.vue'
import Button from '../../../src/components/Button/Button.vue'
</script>
<template>
<div>
<Tooltip placement="top">
<Button type="primary">xin-design</Button>
<template #content>
<div>hello</div>
<h5>xin-design</h5>
</template>
</Tooltip>
</div>
</template>
自定义动画
Tooltip 支持自定义动画,你可以根据需要自行设置所需的动画方法.
<script setup lang="ts">
import Tooltip from '../../../src/components/Tooltip/Tooltip.vue'
import Button from '../../../src/components/Button/Button.vue'
</script>
<template>
<!-- 修改动画请自行查看Tooltip组件中style.css与Tooltip.vue -->
<div>
<Tooltip placement="top">
<Button plain type="danger">transition</Button>
<template #content>
<div>transition</div>
<h5>xin-design</h5>
</template>
</Tooltip>
</div>
</template>
Tooltip API
Tooltip 属性
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
content | 显示的内容,也可被 slot#content 覆盖 | string | '' |
transition | 动画名称 | string | fade |
placement | Tooltip 组件出现的位置 | enum - top-start top top-end left-start left left-end right-start right right-end bottom-start bottom bottom-end | bottom |
popper-options | popper.js 参数 | Object 请参考 popper.js 文档 | {} |
trigger | 如何触发 Tooltip | enum - hover click | hover |
title | 图标标题 | string | - |
Slots
插槽名 | 说明 |
---|---|
default | Tooltip 触发 & 引用的元素 |
content | 自定义内容 |
Exposes
名称 | 详情 | 类型 |
---|---|---|
popperRef | xin-popper 组件实例 | Object |
showTooltip | showTooltip方法控制 xin-tooltip 显示状态 | Function |
closeTooltip | showTooltip方法控制 xin-tooltip 显示状态 | Function |