uni-app官方不提供Tooltip组件，推荐用uni-popup模拟：设type="top"/"bottom"、transitions="none"，通过ref控制显隐，H5可用:hover但小程序仅支持点击触发，需注意overflow裁剪、滚动容器截断及定位偏移问题。
uni-app 里没有内置 Tooltip 组件
官方 uni-ui 库目前（v1.4.40+）不提供 Tooltip，也没有 uni-tooltip 这样的标准组件。直接写 <uni-tooltip></uni-tooltip> 会报错或无渲染效果。别在 npm 搜 “uni-tooltip” 浪费时间——绝大多数是第三方非维护包，兼容性差、API 不稳定，且不支持 H5/小程序双端。
用 uni-popup + 自定义样式模拟 Tooltip 最稳妥
这是目前跨端兼容性最好、可控性最强的做法。核心思路：把 uni-popup 的弹出层定位到文字下方/右侧，并隐藏遮罩层和动画延迟，视觉上接近原生 Tooltip。
- 必须设置
type="top"或type="bottom"，配合transitions="none"关闭过渡动画 - 通过
ref控制显隐，避免用v-model导致 H5 端点击穿透 - 弹出层内容用
slot写纯文本或简单view，别塞复杂组件（如uni-calendar），否则小程序端易白屏 - 定位偏移靠
custom-style调整：{ top: '100%', left: '50%', transform: 'translateX(-50%)' }是居中悬停的常用值
<template>
<view class="tooltip-wrapper" @click="showPopup = true">
<text class="tip-text">悬停我</text>
<uni-popup ref="popup" type="top" transitions="none" :custom-style="popupStyle">
<view class="tooltip-content">这是提示文字</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
showPopup: false,
popupStyle: {
top: '100%',
left: '50%',
transform: 'translateX(-50%)',
marginTop: '4px'
}
}
},
methods: {
// 手动控制，比 v-model 更可靠
toggle() {
this.$refs.popup[this.showPopup ? 'hide' : 'show']()
this.showPopup = !this.showPopup
}
}
}
</script>
真需要“悬停显示”？H5 可用 CSS :hover，但小程序必须点触
小程序（包括微信、支付宝、字节）完全不支持 :hover 伪类，所谓“悬停”只能是点击触发。H5 端若坚持用 hover，得加条件编译：
- H5 用
<view class="tip-trigger" true false></view> - 小程序端统一走
@click，否则交互逻辑断裂 - 别用
hover-class做 Tooltip —— 它只支持简单样式切换（如背景色），不能控制浮层显隐
跨端一致性优先时，放弃“悬停”，只做“点击即显”更省心。
自定义 Tooltip 组件要注意的坑
封装成独立组件时，最容易翻车的是定位丢失和层级错乱：
- 父容器用了
overflow: hidden？Tooltip 会被裁剪——加position: fixed并手动计算top/left（需用uni.createSelectorQuery()获取节点位置） - 弹出层被
scroll-view或swiper截断？必须把 Tooltip 挂载到page根节点下，用uni.createCoverView()（仅 App）或动态appendChild（H5）绕过 - 文字太长导致 Tooltip 宽度溢出屏幕？给
.tooltip-content加max-width: 280px; word-break: break-word - 多实例同时触发？用
ref做单例控制，或加防抖（setTimeout清除前一个定时器）
真正难的不是显示，而是让 Tooltip 在各种嵌套滚动、固定定位、多 tab 场景下始终贴着目标文字——这得靠运行时测量，不是写死 top 值能解决的。
