使用Vue + Tippy.js打造高定制浮層提示組件(Tooltip/Popover)
更新時(shí)間：2025年07月22日 09:57:31 作者：前端極客探險(xiǎn)家
這篇文章主要介紹了使用Vue + Tippy.js打造高定制浮層提示組件(Tooltip/Popover)的相關(guān)資料,支持延遲顯示、手動(dòng)控制、響應(yīng)式內(nèi)容及圖片圖標(biāo)等功能,適用于Tooltip、Popover、關(guān)鍵詞推薦等場(chǎng)景,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、組件簡(jiǎn)介與技術(shù)選型
在現(xiàn)代前端開發(fā)中，浮層提示組件（Tooltip / Popover）幾乎在每個(gè)項(xiàng)目中都會(huì)用到。我們希望它既能樣式靈活，又能交互豐富，還要性能優(yōu)秀、易于封裝。
本次實(shí)戰(zhàn)將基于以下技術(shù)構(gòu)建高定制提示組件：
- Vue 3：組合式 API + 插槽系統(tǒng)，便于封裝彈性強(qiáng)的提示組件；
- Tippy.js：功能完善、主題豐富、交互穩(wěn)定的輕量彈出庫(kù)；
- Floating UI：Tippy.js 背后的定位引擎，性能優(yōu)秀，支持智能翻轉(zhuǎn)、偏移、邊界控制等特性。
二、核心功能實(shí)現(xiàn)
2.1 安裝依賴
npm install @tippyjs/vue@6 tippy.js
2.2 基礎(chǔ)封裝組件（BaseTooltip.vue）
<!-- components/BaseTooltip.vue -->
<template>
<Tippy
:content="content"
:interactive="interactive"
:placement="placement"
:theme="theme"
:trigger="trigger"
:animation="animation"
:arrow="arrow"
>
<template #default>
<slot />
</template>
<template v-if="$slots.content" #content>
<slot name="content" />
</template>
</Tippy>
</template>
<script setup>
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 },
});
</script>
<style scoped>
.tippy-box[data-theme~='light'] {
background-color: white;
color: black;
border: 1px solid #ddd;
}
</style>
2.3 基本用法
<BaseTooltip content="提示信息"> <button>懸停我</button> </BaseTooltip>
2.4 插入自定義 HTML 內(nèi)容
<BaseTooltip interactive>
<template #default>
<button>點(diǎn)擊查看</button>
</template>
<template #content>
<div style="padding: 8px">
<h4>Popover 標(biāo)題</h4>
<p>支持插槽內(nèi)容</p>
<button @click="handleClick">按鈕</button>
</div>
</template>
</BaseTooltip>
<script setup>
function handleClick() {
alert('按鈕被點(diǎn)擊');
}
</script>
三、功能拓展與優(yōu)化建議（附實(shí)現(xiàn)）
3.1 支持延遲顯示和關(guān)閉
<BaseTooltip content="延遲提示" :delay="[500, 300]"> <span>鼠標(biāo)懸停 500ms 后出現(xiàn)</span> </BaseTooltip>
3.2 支持手動(dòng)控制浮層顯隱
<template>
<button ref="btnRef" @click="showTip">手動(dòng)觸發(fā)</button>
</template>
<script setup>
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: '這是手動(dòng)控制的提示',
trigger: 'manual'
});
});
</script>
3.3 響應(yīng)式提示內(nèi)容
<script setup>
import { ref } from 'vue';
const tipContent = ref('加載中...');
setTimeout(() => {
tipContent.value = '接口加載完成';
}, 1500);
</script>
<template>
<BaseTooltip :content="tipContent">
<span>動(dòng)態(tài)內(nèi)容提示</span>
</BaseTooltip>
</template>
3.4 支持圖片和圖標(biāo)
<BaseTooltip interactive>
<template #default>
<span>預(yù)覽圖片</span>
</template>
<template #content>
<img src="https://picsum.photos/120/80" alt="圖像預(yù)覽" />
</template>
</BaseTooltip>
3.5 支持關(guān)鍵詞提示推薦
<BaseTooltip interactive>
<template #default>
<span>搜索建議</span>
</template>
<template #content>
<ul style="padding: 8px;">
<li>Vue 3</li>
<li>Vite</li>
<li>Tippy.js</li>
</ul>
</template>
</BaseTooltip>
3.6 Popover 中支持交互式內(nèi)容提交
<BaseTooltip interactive trigger="click">
<template #default>
<button>點(diǎn)擊填寫</button>
</template>
<template #content>
<form @submit.prevent="submit">
<input v-model="msg" placeholder="輸入信息" />
<button type="submit">提交</button>
</form>
</template>
</BaseTooltip>
<script setup>
import { ref } from 'vue';
const msg = ref('');
const submit = () => {
alert('你輸入了：' + msg.value);
};
</script>
3.7 支持點(diǎn)擊浮層內(nèi)容進(jìn)行下載（如導(dǎo)出圖片）
<BaseTooltip interactive trigger="click">
<template #default>
<span>點(diǎn)擊下載圖片</span>
</template>
<template #content>
<img
src="https://picsum.photos/100"
alt="預(yù)覽圖"
style="cursor: pointer"
@click="download"
/>
</template>
</BaseTooltip>
<script setup>
function download() {
const link = document.createElement('a');
link.;
link.download = 'preview.jpg';
link.click();
}
</script>
四、封裝為插件并全局注冊(cè)
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);
五、總結(jié)
本項(xiàng)目基于 Vue 3 和 Tippy.js 實(shí)現(xiàn)了一個(gè)高靈活性、主題豐富、插槽支持良好的浮層提示組件，適合用于：
- 基本 Tooltip 提示
- Popover 彈出內(nèi)容
- 表單浮層、關(guān)鍵詞推薦、圖像預(yù)覽等場(chǎng)景
可作為彈出層組件的基礎(chǔ)能力，進(jìn)行下一級(jí)封裝，如 Popconfirm、Dropdown、ContextMenu、快捷操作工具條等.
到此這篇關(guān)于使用Vue + Tippy.js打造高定制浮層提示組件(Tooltip/Popover)的文章就介紹到這了,更多相關(guān)Vue Tippy.js浮層提示組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章給大家詳細(xì)介紹了vue跨域處理問(wèn)題的方式以及相關(guān)知識(shí)點(diǎn)介紹，對(duì)此有興趣的朋友學(xué)習(xí)下。2018-02-02
這篇文章主要介紹了Vue中watchEffect的追蹤邏輯,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue結(jié)合SignalR實(shí)現(xiàn)前后端實(shí)時(shí)消息同步
這篇文章主要為大家詳細(xì)介紹了Vue結(jié)合SignalR實(shí)現(xiàn)前后端實(shí)時(shí)消息同步，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
vue.config.js配置proxy代理產(chǎn)生404錯(cuò)誤的原因及解決
這篇文章主要介紹了vue.config.js配置proxy代理產(chǎn)生404錯(cuò)誤的原因及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
關(guān)于Vue-extend和VueComponent問(wèn)題小結(jié)
這篇文章主要介紹了Vue-extend和VueComponent問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
Vue使用vxe-table導(dǎo)出和自定義Excel樣式的詳細(xì)教程
vxe-table 不僅支持將表格數(shù)據(jù)導(dǎo)出為 .xlsx 文件,還提供了強(qiáng)大的自定義樣式能力,因此本文給大家介紹了Vue使用vxe-table導(dǎo)出和自定義Excel樣式的詳細(xì)教程,需要的朋友可以參考下2026-05-05
這篇文章主要為大家詳細(xì)介紹了Vue自嵌套樹組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖片驗(yàn)證碼生成，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue.js生命周期鉤子中this指向的常見陷阱分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-05-05
解決vue數(shù)組中對(duì)象屬性變化頁(yè)面不渲染問(wèn)題
今天小編就為大家分享一篇解決vue數(shù)組中對(duì)象屬性變化頁(yè)面不渲染問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08