Tooltip 文字提示

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

基础用法

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

<template>
  <div class="basic block">
    <Tooltip content="hello tooltip">
      <Button> 激活 Tooltip </Button>
    </Tooltip>
  </div>
</template>

<script setup>
import { Tooltip, Button } from "study-element";
</script>

不同位置

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

<template>
  <div class="wrapper">
    <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>

<script setup>
import { Tooltip, Button } from "study-element";
</script>
<style scoped>
.wrapper {
  display: flex;
  gap: 20px;
}
</style>

触发方式

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

<template>
  <div class="basic block">
    <Tooltip content="hello tooltip" trigger="click">
      <Button> 点击激活 Tooltip </Button>
    </Tooltip>
  </div>
</template>

<script setup>
import { Tooltip, Button } from "study-element";
</script>

更多内容的文字提示

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

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

<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>

<script setup>
import { Tooltip, Button } from "study-element";
</script>

手动触发

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

<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>

<script setup>
import { ref } from "vue";
import { Tooltip, Button } from "study-element";

const tooltipRef = ref();
const open = () => {
  tooltipRef.value?.show();
};
const close = () => {
  tooltipRef.value?.hide();
};
</script>

API

Attributes

Name	Description	Type	Default
content	弹出框内容, 可通过 slot#content 修改	string	''
placement	打开 Tooltip 的位置	'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'	bottom
popper-options	popper.js parameters	refer to popper.js doc	{}
open-delay	打开 Tooltip 延迟	number	0
close-delay	关闭 Tooltip 延迟	number	200
trigger	打开 Tooltip 方式	'hover' | 'click'	hover
manual	是否开启手动触发模式	boolean	false
transition	过渡动画名称	string	''

Events

Name	Description	Type
visible-change	当 tooltip 展示/隐藏时被触发	boolean
click-outside	当点击到 Tooltip 外侧区域时被触发	boolean

Slots

Name	Description
default	触发 Tooltip 内容插槽
content	打开 Tooltip 显示内容插槽

Exposes

Name	Description	Type
show	手动打开 Tooltip	(event?: Event | undefined) => void
hide	手动关闭 Tooltip	(event?: Event | undefined) => void