antdv- Tooltip 文字提示组件
Tooltip 是一种常见的 UI 交互组件，当用户将鼠标悬停在某个元素（如按钮、图标、文字等）上时，会自动显示一段提示文字信息，用于补充说明、提示功能、展示额外信息等。
一、基本语法
<template><a-tooltip title="这是一个提示信息"><span>鼠标悬停我试试</span></a-tooltip>
</template>
<a-tooltip>：是 Antdv 提供的 tooltip 提示组件。
title属性：是最基础的提示内容，必填或常用。插槽内容：即被包裹的子内容，可以是任意 Vue 组件，比如
<a-button>、<span>、图标等。
核心语法
<a-tooltip title="这里是提示文字"><任意可渲染的内容，比如按钮、图标、文字等 />
</a-tooltip>二、常用属性
属性名 | 类型 | 说明 |
|---|---|---|
title | String |VNode | 必填项，提示的内容，可以是文本，也可以是 VNode（比如插槽传入复杂内容） |
color | String | 自定义 tooltip 的背景色，用于突出重点 |
placement | String | 提示框出现的位置，基础值：top,bottom,left,right ，可进行组合 |
trigger | String | 触发方式： |
mouse-enter-delay | Number | 鼠标进入后延时显示（秒） |
mouse-leave-delay | Number | 鼠标离开后延时隐藏（秒） |
overlay-style | Object | 自定义提示框的样式（CSS 样式对象） |
overlay-class-name | String | 自定义提示框的 className |
align | Object | 提示框对齐方式（高级用法，一般用默认即可） |
destroy-tooltip-on-hide | Boolean | 当 tooltip 隐藏时是否销毁 DOM 节点，用于性能优化 |
arrow-point-at-center | Boolean | 箭头是否指向目标中心 |
1.修改背景颜色
<template> <a-tooltip title="这是一个提示信息" color="#ff4d4f"><span>鼠标悬停我试试</span></a-tooltip>
</template> 
2.控制出现位置
<template><a-tooltip title="我在右边" placement="right"><a-button>看右边</a-button></a-tooltip>
</template>
3.使用插槽
对于 <a-tooltip>而言：
它的内容（也就是你要提示的内容）通常是通过
title属性（字符串） 或者 title插槽 来定义的。除了
title属性，<a-tooltip>还暴露了一个具名插槽，叫做title，你可以用它来传入任意内容（包括 HTML 或 Vue 组件）。<template #title>...</template>→ 传入任意 HTML/Vue 组件，更灵活强大
<a-tooltip:overlay-inner-style="{backgroundColor: 'white',color: '#333',padding: '8px',width: '300px',}"><template #title><p style="font-size: 16px"><strong>xxx</strong></p><p><strong>x</strong></p><p>{{ record.ww || '暂无信息' }}</p><p><strong>xx</strong></p><p>{{ record.ee || '暂无信息' }}</p><p><strong>xxx</strong></p><p>{{ record.dd || '暂无' }}</p><p><strong>xxxx</strong></p><p>{{ record.aa|| '暂无' }}</p></template><imgsrc="../../../../src/assets/images/callOutCenter/ai.png"style="width: 16px; height: 16px; margin-left: 4px; vertical-align: middle"/>
</a-tooltip>
简单提示 直接用
title="xxx"即可。复杂提示内容 用
<template #title>插槽，放入 HTML。
三、总结
项目 | 说明 |
|---|---|
组件名称 |
|
作用 | 鼠标悬停时显示提示信息，用于补充说明、功能提示等 |
核心属性 |
|
插槽 | 支持 |
常见用法 | 按钮提示、图标解释、表单字段提示、功能引导等 |