Tooltip 文字提示

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

基础用法

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

<script setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/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 '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/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>
.lu-button {
  margin-right: 20px;
}
</style>

触发方式

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

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