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

npm install @tippyjs/vue@6 tippy.js

<!-- 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>

<BaseTooltip content="提示信息">
  <button>悬停我</button>
</BaseTooltip>

<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>

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

<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>

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

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

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

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

<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>

<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>

<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>

import BaseTooltip from '@/components/BaseTooltip.vue';

export default {
  install(app) {
    app.component('BaseTooltip', BaseTooltip);
  }
}

import TooltipPlugin from './plugins/tooltip.plugin';
app.use(TooltipPlugin);