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

<BaseTooltip content="延遲提示" :delay="[500, 300]">
  <span>鼠標(biāo)懸停 500ms 后出現(xiàn)</span>
</BaseTooltip>

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

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

<BaseTooltip interactive>
  <template #default>
    <span>預(yù)覽圖片</span>
  </template>
  <template #content>
    <img src="https://picsum.photos/120/80" alt="圖像預(yù)覽" />
  </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>點(diǎn)擊填寫(xiě)</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>點(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>

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

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

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