Tooltip 省略提示

当文本溢出时自动启用气泡提示，避免表格或紧凑布局中信息被截断。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { Tooltip } from "@/components/core/tooltip";

const demoProps = { style: { width: "220px" } };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <Tooltip v-bind="demoProps">这是一段很长的业务说明文本，超过容器宽度时会显示提示。</Tooltip>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { Tooltip } from "@/components/core/tooltip";

Props

参数	说明	类型	默认值	必填
line	多少行文字溢出开始省略并气泡提示，默认 1 行	number	1	否
realTime	是否开启每次鼠标悬停时判断文字是否溢出（适用于元素默认隐藏，需要鼠标悬停触发的场景），如果不开启，则初始化页面时只判断一次，并缓存是否文字溢出提示，不会因为后续文字变化而重新判断是否溢出，默认 false	boolean	false	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
default	默认内容插槽。	-

Expose

名称	说明	类型
refresh	暴露 refresh 给外部调用。	() => {<br> requestAnimationFrame(checkOverflow);<br> }

Module API

名称	说明	类型
Tooltip	导出 Tooltip 供业务侧复用。	useInstall(index)

Types

TooltipProps

导出 TooltipProps 供业务侧复用。

字段	说明	类型	默认值	必填
line	多少行文字溢出开始省略并气泡提示，默认 1 行	number	-	否
realTime	是否开启每次鼠标悬停时判断文字是否溢出（适用于元素默认隐藏，需要鼠标悬停触发的场景），如果不开启，则初始化页面时只判断一次，并缓存是否文字溢出提示，不会因为后续文字变化而重新判断是否溢出，默认 false	boolean	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。