首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Tippy.js浮层提示组件

使用Vue + Tippy.js打造高定制浮层提示组件(Tooltip/Popover)

2025-07-22 09:57:32 作者：前端极客探险家

这篇文章主要介绍了使用Vue + Tippy.js打造高定制浮层提示组件(Tooltip/Popover)的相关资料,支持延迟显示、手动控制、响应式内容及图片图标等功能,适用于Tooltip、Popover、关键词推荐等场景,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、组件简介与技术选型

在现代前端开发中，浮层提示组件（Tooltip / Popover）几乎在每个项目中都会用到。我们希望它既能样式灵活，又能交互丰富，还要性能优秀、易于封装。

本次实战将基于以下技术构建高定制提示组件：

Vue 3：组合式 API + 插槽系统，便于封装弹性强的提示组件；
Tippy.js：功能完善、主题丰富、交互稳定的轻量弹出库；
Floating UI：Tippy.js 背后的定位引擎，性能优秀，支持智能翻转、偏移、边界控制等特性。

二、核心功能实现

2.1 安装依赖

npm install @tippyjs/vue@6 tippy.js

2.2 基础封装组件（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 内容

<BaseTooltip interactive>
  <template #default>
    <button>点击查看</button>
  </template>
  <template #content>
    <div style="padding: 8px">
      <h4>Popover 标题</h4>
      <p>支持插槽内容</p>
      <button @click="handleClick">按钮</button>
    </div>
  </template>
</BaseTooltip>

<script setup>
function handleClick() {
  alert('按钮被点击');
}
</script>

三、功能拓展与优化建议（附实现）

3.1 支持延迟显示和关闭

<BaseTooltip content="延迟提示" :delay="[500, 300]">
  <span>鼠标悬停 500ms 后出现</span>
</BaseTooltip>

3.2 支持手动控制浮层显隐

<template>
  <button ref="btnRef" @click="showTip">手动触发</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: '这是手动控制的提示',
    trigger: 'manual'
  });
});
</script>

3.3 响应式提示内容

<script setup>
import { ref } from 'vue';

const tipContent = ref('加载中...');
setTimeout(() => {
  tipContent.value = '接口加载完成';
}, 1500);
</script>

<template>
  <BaseTooltip :content="tipContent">
    <span>动态内容提示</span>
  </BaseTooltip>
</template>

3.4 支持图片和图标

<BaseTooltip interactive>
  <template #default>
    <span>预览图片</span>
  </template>
  <template #content>
    <img src="https://picsum.photos/120/80" alt="图像预览" />
  </template>
</BaseTooltip>

3.5 支持关键词提示推荐

<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 中支持交互式内容提交

<BaseTooltip interactive trigger="click">
  <template #default>
    <button>点击填写</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 支持点击浮层内容进行下载（如导出图片）

<BaseTooltip interactive trigger="click">
  <template #default>
    <span>点击下载图片</span>
  </template>
  <template #content>
    <img
      src="https://picsum.photos/100"
      alt="预览图"
      style="cursor: pointer"
      @click="download"
    />
  </template>
</BaseTooltip>

<script setup>
function download() {
  const link = document.createElement('a');
  link.href = 'https://picsum.photos/100';
  link.download = 'preview.jpg';
  link.click();
}
</script>

四、封装为插件并全局注册

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浮层提示组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！