Vue + Tippy.js 打造高定制浮层提示组件（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, defa