X-Element

Appearance

Tooltip 文字提示 ​

常用于展示鼠标 hover 时的提示信息。

基础用法 ​

使用 content 属性来决定 hover 时的提示信息。

<script setup>
import Tooltip from '@com/Tooltip/Tooltip.vue'
import Button from '@com/Button/Button.vue'
</script>
<template>
  <div class="basic block">
    <Tooltip content="hello tooltip">
      <Button> 激活 Tooltip </Button>
    </Tooltip>
  </div>
</template>

不同位置 ​

由 placement 属性决定展示效果： placement属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。

<script setup>
import Tooltip from '@com/Tooltip/Tooltip.vue'
import Button from '@com/Button/Button.vue'
</script>
<template>
  <div class="basic block">
    <Tooltip content="hello tooltip" placement="top-start">
      <Button> top-start </Button>
    </Tooltip>

    <Tooltip content="hello tooltip" placement="bottom-start">
      <Button> bottom-start </Button>
    </Tooltip>

    <Tooltip content="hello tooltip" placement="left-start">
      <Button> left-start </Button>
    </Tooltip>

    <Tooltip content="hello tooltip" placement="right-start">
      <Button> right-start </Button>
    </Tooltip>
  </div>
</template>
<style scoped>
.hx-button {
  margin-right: 20px;
}
</style>

触发方式 ​

由 trigger 属性决定触发方式： hover | click, 默认为 hover

<script setup>
import Tooltip from '@com/Tooltip/Tooltip.vue'
import Button from '@com/Button/Button.vue'
</script>
<template>
  <div class="basic block">
    <Tooltip content="hello tooltip" trigger="click">
      <Button> 点击激活 Tooltip </Button>
    </Tooltip>
  </div>
</template>

更多内容的文字提示 ​

展示多行文本或者是设置文本内容的格式

用具名插槽 content，替代tooltip中的content属性。

<script setup>
import Tooltip from '@com/Tooltip/Tooltip.vue'
import Button from '@com/Button/Button.vue'
</script>
<template>
  <div class="basic block">
    <Tooltip trigger="click">
      <Button> 复杂 HTML 结构的Tooltip </Button>
      <template #content>
        <h3>this is the title</h3>
        <p>this is the content</p>
      </template>
    </Tooltip>
  </div>
</template>

手动触发 ​

将 manual 属性设置为 true 即可， 然后可以使用实例上面的 show 和 hide 方法打开关闭下拉菜单。



<script setup>
import { ref } from 'vue'
import Tooltip from '@com/Tooltip/Tooltip.vue'
import Button from '@com/Button/Button.vue'

const tooltipRef = ref()
const open = () => {
  tooltipRef.value?.show()
}
const close = () => {
  tooltipRef.value?.hide()
}
</script>
<template>
  <div class="basic block">
    <Tooltip content="hello tooltip" ref="tooltipRef" manual>
      <Button> 手动容器 </Button>
    </Tooltip>

    <br /><br />
    <Button type="primary" @click="open"> 点击手动触发显示 </Button>
    <Button type="danger" @click="close"> 点击手动触发隐藏 </Button>
  </div>
</template>

APIs ​

属性 ​

属性名称描述类型默认值
content显示的内容，也可被 slot#content 覆盖string''
placementTooltip 组件出现的位置bottom
popper-optionspopper.js 参数object 请参考 popper.js 文档{}
open-delay在触发后多久显示内容，单位毫秒number0
close-delay离开区域多久关闭内容，单位毫秒number200
trigger如何触发 Tooltipenum: hover | clickhover
manual是否开启手动触发模式booleanfalse
transition过度动画名称string''

事件 ​

名称描述类型
visible-change当 tooltip 展示/隐藏时被触发boolean
click-outside当点击到 Tooltip 外侧区域时被触发boolean

插槽 ​

名称类型
defaultTooltip 触发 & 引用的元素
content自定义内容

实例 ​

名称描述类型
show关闭(event?: Event| undefined) => void
hide隐藏(event?: Event|undefined) => void