一、组件简介与技术选型
在现代前端开发中，浮层提示组件（Tooltip / Popover）几乎在每个项目中都会用到。我们希望它既能样式灵活，又能交互丰富，还要性能优秀、易于封装。
本次实战将基于以下技术构建高定制提示组件：
- Vue 3：组合式 API + 插槽系统，便于封装弹性强的提示组件；
- Tippy.js：功能完善、主题丰富、交互稳定的轻量弹出库；
- Floating UI：Tippy.js 背后的定位引擎，性能优秀，支持智能翻转、偏移、边界控制等特性。
二、核心功能实现
2.1 安装依赖
npm install @tippyjs/vue@6 tippy.js
2.2 基础封装组件（BaseTooltip.vue）
import { Tippy } from '@tippyjs/vue';
defineProps({
content: String,
placement: { type: String, default: 'top' },
theme: { type: String, default: 'light' },
trigger: { type: String, default: 'mouseenter focus' },
animation: { type: String, default: 'shift-away' },
arrow: { type: Boolean, default: true },
interactive: { type: Boolean, default: false },
});
.tippy-box[data-theme~='light'] {
background-color: white;
color: black;
border: 1px solid #ddd;
}
2.3 基本用法
2.4 插入自定义 HTML 内容
function handleClick() { alert('按钮被点击'); }Popover 标题
支持插槽内容
三、功能拓展与优化建议（附实现）
3.1 支持延迟显示和关闭
鼠标悬停 500ms 后出现
3.2 支持手动控制浮层显隐
import { ref, onMounted } from 'vue';
import tippy from 'tippy.js';
const btnRef = ref(null);
let instance;
const showTip = () => {
if (instance) {
instance.show();
setTimeout(() => instance.hide(), 2000);
}
};
onMounted(() => {
instance = tippy(btnRef.value, {
content: '这是手动控制的提示',
trigger: 'manual'
});
});
3.3 响应式提示内容
import { ref } from 'vue';
const tipContent = ref('加载中...');
setTimeout(() => {
tipContent.value = '接口加载完成';
}, 1500);
动态内容提示
3.4 支持图片和图标
预览图片
3.5 支持关键词提示推荐
搜索建议
- Vue 3
- Vite
- Tippy.js
3.6 Popover 中支持交互式内容提交
import { ref } from 'vue';
const msg = ref('');
const submit = () => {
alert('你输入了：' + msg.value);
};
3.7 支持点击浮层内容进行下载（如导出图片）
点击下载图片function download() { const link = document.createElement('a'); link.href = 'https://picsum.photos/100'; link.download = 'preview.jpg'; link.click(); }
四、封装为插件并全局注册
4.1 tooltip.plugin.ts
import BaseTooltip from '@/components/BaseTooltip.vue';
export default {
install(app) {
app.component('BaseTooltip', BaseTooltip);
}
}
4.2 main.ts 中使用
import TooltipPlugin from './plugins/tooltip.plugin'; app.use(TooltipPlugin);
五、总结
本项目基于 Vue 3 和 Tippy.js 实现了一个高灵活性、主题丰富、插槽支持良好的浮层提示组件，适合用于：
- 基本 Tooltip 提示
- Popover 弹出内容
- 表单浮层、关键词推荐、图像预览等场景
可作为弹出层组件的基础能力，进行下一级封装，如 Popconfirm、Dropdown、ContextMenu、快捷操作工具条等.
到此这篇关于使用Vue + Tippy.js打造高定制浮层提示组件(Tooltip/Popover)的文章就介绍到这了,更多相关Vue Tippy.js浮层提示组件内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
