Tooltip 文字提示

文字提示用于在鼠标悬停时提供简短的说明文字，帮助用户理解界面元素的功能。

基础用法

将鼠标悬停在触发元素上即可显示提示。默认从上方弹出。

<TTooltip text="这是提示文字">
  <button class="btn">悬停查看</button>
</TTooltip>

四个方向

支持四种弹出方向：top（默认）、right、bottom、left。

查看代码

<TTooltip placement="left" text="左侧提示">
  <button class="btn">Left</button>
</TTooltip>
<TTooltip placement="top" text="上方提示">
  <button class="btn">Top</button>
</TTooltip>
<TTooltip placement="bottom" text="底部提示">
  <button class="btn">Bottom</button>
</TTooltip>
<TTooltip placement="right" text="右侧提示">
  <button class="btn">Right</button>
</TTooltip>

图标元素

Tooltip 的默认插槽支持任意元素，搭配图标使用效果更佳。

查看代码

<script setup>
import { IconInfoCircle } from '@tabler/icons-vue'
</script>

<template>
  <TTooltip text="这是一条有用的提示信息">
    <span class="d-inline-flex align-items-center gap-1 text-secondary">
      <IconInfoCircle size="20" />
      悬停查看提示
    </span>
  </TTooltip>
</template>

禁用状态

设置 disabled 属性禁用 Tooltip 交互。

<TTooltip disabled text="被禁用的提示">
  <button class="btn btn-secondary">已禁用</button>
</TTooltip>

长文本

Tooltip 默认最大宽度为 200px，超出会自动换行。

<TTooltip text="这是一段比较长的提示文字，用于演示 Tooltip 的自动换行和最大宽度限制效果。">
  <button class="btn btn-outline-warning">悬停查看长文本</button>
</TTooltip>

API

Props

属性	类型	默认值	说明
text	string	''	提示文字内容
placement	'top' | 'right' | 'bottom' | 'left'	'top'	弹出方向
disabled	boolean	false	是否禁用
showDelay	number	100	鼠标悬停后显示延迟（毫秒）
hideDelay	number	150	鼠标移出后隐藏延迟（毫秒）

Slots

插槽	说明
default	触发元素（按钮、图标、文本等）

Emits

事件	载荷	说明
open	—	提示显示时触发
close	—	提示隐藏时触发